今天我们简单说一下 vuex 的使用, vuex 是什么呢, 相当于 react 的 redux, 如果项目使用数据过多的话, 直接管理是非常不方便的, 那么采用 vuex, 那些繁琐的问题就迎刃而解了, 首先我们先看看官方对 vuex 的说明:
Vuex 是一个专为 vue.js 应用程序开发的状态管理模式. 它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化. Vuex 也集成到 Vue 的官方调试工具 devtools extension, 提供了诸如零配置的 time-travel 调试, 状态快照导入导出等高级调试功能.
说白了就是 vue 的状态管理, 你只需要每次动态的改变这些状态就行, 数据就会自动渲染, 从第一步安装开始,
1, 安装 vue 项目:
- (1).vue init webpack Testporject
- (2).cd Testporject
- (3).npm i vuex --save
- (4) npm run dev
这些指令就不用说了, 作为一个 vue 开发者, 如果不知道的话那就可以不用学了, 前提是你需要依赖 vue-cli, 如果安装失败, 那请先安装 vue-cli 吧
2,vuex 的引入
项目安装成功以后, 初始的文件目录格式都是一样的, 像我这样:
然后我们简单的使用, 在 main.js 中引入 vuex
javascript 代码
- import Vue from 'vue'
- import Vuex from 'vuex'
- Vue.use(Vuex)
记得一定要挂载使用它, 就是这一句: Vue.use(Vuex)
3, 在 main.js 中加入
javascript 代码
- var store = new vuex.Store({//store 对象
- state:{
- count:0
- }
- })
4, 把刚才的 store 对象实例化到 Vue 中
javascript 代码
- new Vue({
- el: '#app',
- router,
- store,// 加入 store 对象
- template: '<App/>',
- components: { App }
- })
完成这一步我们就可以使用了, 一个简单的 vuex 的 state 就可以了, 怎么用呢
html 代码
<div id="hello">
<p>{{$store.state.count}}</p>
</div>
5, 很明显, 刚才只是简单的一例子, 如果你需要做大型的项目, 不可能把 store 对象写在 main.js 里, 这样是非常不方便管理的, 所以我们需要在 src 下新建一个文件夹 store 专门存放 store 对象, 然后我们新建一个文件 index.js
javascript 代码
- //index.js
- import Vue from 'vue'
- import vuex from 'vuex'
- Vue.use(vuex);
- export default new vuex.Store({
- state:{
- count:0
- }
- })
相应的 main,js 就需要做修改了
javascript 代码
- import store from './store/index'
- new Vue({
- el: '#app',
- router,
- store,// 加入 store 对象
- template: '<App/>',
- components: { App }
- })
这样做就是为了把 store 对象分离出去, 方便管理, 但是你会发现这个 store 对象是全局的所有组件都可以使用, 如果我们的组件多了, 数据多了, 全部堆放在一起, 是不是特别臃肿, 所以现在我们就该使用 modules
首页我们新建一个 js 文件存放一个组件可能用到的 store 对象, 比如我新建 heade.js, 在这里我们不需要引用 vuex 了, 只需要默认 export default 就行了
javascript 代码
- //heade.js
- export default {
- state: {
- count: 0
- }
- }
然后我们把在 index.js 中使用 modules
javascript 代码
- import Vue from 'vue'
- import vuex from 'vuex'
- Vue.use(vuex);
- import HeadeStore from './heade';// 引入刚才的 heade.js
- export default new vuex.Store({
- modules: {
- Heade: HeadeStore
- }
- })
现在我们管理起来就方便多了, 比如还有其他的呢我们放在 modules 下就可以了, 比如, 我们除了 heade.js 里管理的是一个组件的 store 对象, 我们还有一个 content.js 来管理另外一个组件的 store 对象, 那么我们在 store 文件夹下载新建一个 content.js, 和 heade.js 一样, 只需要默认输出就可以了
javascript 代码
- //content.js
- export default {
- state: {
- cont: '这是 content 内容'
- }
- }
然后我们在 index.js 中引入挂在 modules 下就可以啦
javascript 代码
- import Vue from 'vue'
- import vuex from 'vuex'
- Vue.use(vuex);
- import HeadeStore './heade';// 引入刚才的 heade.js
- import ContentStore from './content' // 引入 content.js
- export default new vuex.Store({
- modules: {
- Heade: HeadeStore,
- Content: ContentStore
- }
- })
这样是不是方便多了, 但是怎么用呢, 很简单, 现在需要通过 modules 去找他, 之前的方法:$store.state.count 改成 $store.state.Heade.count 就行了, 很明显这是找到了 heade.js 下的 count 值, 那么找 content.js 下 cont 的值呢? 一样的, 换一下 modules 的名就行 $store.state.Content.cont
html 代码
- //heade 组件
- <p>{{$store.state.Heade.count}}</p>
html 代码
- //content 组件
- <p>{{$store.state.Content.cont}}</p>
输出结果分贝为: 0, 这是 content 内容
6, 那么接下来你觉得问题解决了吗, 难道你们的项目组件所有的状态都用这一个, 那如果我需要动态的改变他的状态呢, 怎么办? 没事, 这不 mutations 来了吗, 问题就好多了, 怎么用呢, 这是干嘛的呢, 说白了就是动态的改变 state 的值完成页面的同步渲染, 看看用法吧, 直接在 state 对象后面加就行了
javascript 代码
- //heade.js
- export default {
- state: {
- count: 0
- },
- mutations: {
- Count (state) {
- state.count =1
- }
- }
- }
解释一下, mutations 对象是函数, 默认传值是 state, 也就是上面的 state, 所以可以直接操作 state.count
怎么用呢, 很简单, 比如页面有一个按钮, 点击改变 state 的 count
html 代码
<a href="javascript:;" @click="$store.commit('Count ')">click</a>
此时页面渲染为 1
commit('Count') 调用 mutations 的固定方法, 参数为 mutations 的方法名, 当然 commit 不止传一个参数, 也可以传很多, 比如:
html 代码
<a href="javascript:;" @click="$store.commit('Count',10)">click</a>
可以在 heade.js 的 mutations 下 Count 方法接受它
javascript 代码
- //heade.js
- export default {
- state: {
- count: 0
- },
- mutations: {
- Count (state,n) {
- state.count =state.count+n
- }
- }
- }
此时输出结果为 10
到这一步为止, 我们已经可以正常的动态的修改 state 来渲染在页面了, 你会发现, mutations 是同步的, 只要你在一个组件执行 mutations 的方法了, 那所有的组件只要用到 mutations 的方法都会同步进行改变, 这并不是我们想要的结果, 所以, actions 来解决问题了, 写法一样,
javascript 代码
- //heade.js
- export default {
- state: {
- count: 0
- },
- mutations: {
- Count (state,n) {
- state.count =state.count+n
- }
- },
- actions: {
- Acount (context) {
- context.commit('Count')
- }
- }
- }
接着解释, actions 和 mutations 的写法一样, 都是函数, 但是 actions 的默认参数是 context,context.commit('Count') 的意思是触发 mutations 下的 Count 函数, 那么怎么触发 actions 的函数呢, 方法就是
html 代码
- //heade 组件
- <a href="javascript:;" @click="$store.dispatch('Acount')">click</a>
dispatch 方法是官方固定触发 actions 下函数的方法
官方推荐 , 将异步操作放在 action 中
还有一个属性我觉得也没有必要说了, getters, 解释一下它的作用
getters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 ( 状态 ) 的. 比如我们 heade.js 的 state 有一个值 show:false getters 就是计算与 false 相反的, 但是它计算的值是不能直接修改的, 需要对应的 state 发生变化才能修改.
javascript 代码
- //heade.js
- export default {
- state: {
- count: 0,
- show: false
- },
- mutations: {
- Count (state,n) {
- state.count =state.count+n
- }
- },
- actions: {
- Acount (context) {
- context.commit('Count')
- }
- },
- getters:{
- not_show(state){
- return !state.show;
- }
- },
- }
它也是默认接受 state
最后一点就是为了方便操作开发, 一般情况 $store.state.Heade.show,$store.state.show 写起来不是很方便, 那么 vuex 的辅助函数 mapState,mapGetters,mapActions,mapMutations 就可以解决这个问题, 目的就是方便操作, 大家都知道 vue 的方法 methods,computed,created 下默认全局指向都是 this, 那我们之前的写法都是需要通过 $store 来获取其 state 值, 那么现在用了 mapState,mapGetters,mapActions,mapMutations 就相当于我们随便起一个键值名 (函数)(例如我们下文的 count). 把 store 对象的 state 之类的赋值给它, 那么这时候我们获取 store 对象下 state 的值时就能直接可以用 this.count 去获调用就行了, 相对于之前的写法和操作来说方便了很多!
javascript 代码
- <template>
- <div class="Heade">
- <p>{{msg}}</P>
- </div>
- </template>
- <script>
- import {mapState} from 'vuex';
- export default {
- name: 'Heade',
- data () {
- return {
- msg: ''
- }
- },
- computed:{
- // 这里的三点叫做 : 扩展运算符
- ...mapState([
- count:state=>state.Heade.count
- ]),
- },
- created () {
- this.msg = this.count
- }
- }
- </script>
还有这里的三点拓展运算符, 其实写法跟这种是一样的:
javascript 代码
- computed:{
- count(){
- return this.$store.state.Heade.count;
- }
- }
那么 return 的啥东西 count 函数就是个啥东西
现在我们就直接可以用 this.count 去找到 state 下 count 的值了, created 方法是页面刚载入加载完事执行的方法, 完后动态的赋值给 msg,mapState 一般放在 computed 计算属性中, mapActions,mapMutations 一般放在 methods 下,
到这一步为止 vuex 的学习使用就结束了, 你可以尽情的去操作数据了, 也不用担心会混乱, 如果您连我写的文档都看不懂, 那你不适合学习 vue, 放弃吧!
demo 地址 https://github.com/Ningstyle/VuexTest
vuex 中文官网 https://vuex.vuejs.org/zh-cn/
以上教程全部原创, 手打, 难免有错误的地方, 请各位指正!
来源: http://www.qdfuns.com/article/32387/7f91aee4cd00022022a295449a0f4305.html