Vue中Vuex的使用方法技巧

备注：此案例是用vue脚手架创建的demo

1、首先要知道什么是Vuex?

在Vue官方网站的解释是： Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化  

2、使用Vuex时，常见的关键词

1、store：仓库容器， 包含应用中大部分的状态 (state)

2、state：数据状态

3、mutations：更改 Vuex 的 store 中状态的唯一方法是提交 mutation

4、commit： 调用 store.commit 方法，触发 mutation

5、mapState：借助mapState辅助函数获取store中保存的状态，避免当一个组件需要获取多个状态的时候，将这些状态都声明为计算属性时代码冗余

3、组件及模块的分配

1、main.js：主模块

2、store.js：管理仓库

3、state.js：数据状态

4、mutations.js：更改 Vuex 的 store 中数据状态

5、template.vue：组件渲染

备注：为了方便以后代码的修改，我将state和mutations从store中抽离出来，单独做了模块，使用时直接在store中引用

4、Vuex的使用

（1）、安装vuex，在工作目录下执行命令：

npm install vuex --save

（2）、创建store，状态管理仓库：store.js

import  Vue  from  'vue'

import  Vuex  from  'vuex' 

Vue.use(Vuex)

import  state  from  'state.js路径'

import  mutations  from  'mutations.js路径'   

const  store  =  new  Vuex.Store({

            state,mutations

})

export  default  store

（3）、创建state.js

//定义状态管理数据

//user 记录用户的登录信息

const state = {

        user:localStorage.user?JSON.parse(localStorage.user):'',

}

export  default  state

（4）创建mutations.js

//更改 Vuex 的 store 中状态的唯一方法是提交 mutation，Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数

const  mutations  =  {

          onLogin(state){ //更改state中的user数据

                 state.user = JSON.parse(localStorage.user);

          },

}

export default mutations

（5）、在main.js中引入store

import   Vue  from  'vue'

import  App  from  './App'

import  router  from  './router'

import  store  from  'store.js路径'

Vue.config.productionTip  =  false

new Vue({

      el: '#app',

      router,

      store,

      template: ''

       components: { App }

})

（6）、在template.vue组件中使用