vuex的理解
一： 概念理解
vuex类似一个公共的管理仓库 , vuex中存储的值，在其它组件都可以拿到，因此如果我们有多个组件都用到同一个值，并且这个值发生改变，其它组件都能够接收到改变后的值，我们可以考虑使用vuex。 当然如果我们只有两三个组件用到一个值，我们可以考虑使用组件传值的方式。
二： 安装
npm install vuex -D
三： 简单使用
安装完成后，创建一个store文件夹，store中创建一个index.js文件，内容如下：
（ 注 1-1 ）
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
注意：使用插件一般三步走原则
1. 引入vue
2. 引入插件
3. 使用插件
上面引入了vuex,接下来创建一个仓库，并将仓库注入到项目中。首先创建一个实例化对象，并导出 （ 注 1-2 ）
const store = new Vuex.Store({
})
export default store
在main.js中引入这个index.js文件，然后注入项目中 （注 1-3）
import Vue from "vue"
import App from './App.vue'
import store from "./store"
new Vue({
store,
render: h => h(App)
}).$mount("#app")
上面过程将创建一个仓库到将仓库注入到项目中这一步骤已经完成。接下来需要了解vuex里面的几个核心部分， 五个属性，分别为state,mutations,actions,getters,modules
- state 一个对象，用来存储公共的变量
- mutations 对象，对象里面放的是方法，方法可以接收到state里面的值，因此如果需要修改state中的值，必须通过mutations,官方文档中表示同步操作放到mutations中处理
- actions 一个对象，对象中存放的是方法，方法中可以解构出commit方法，commit方法通过提交mutations里面的方法，从而来修改state中的值
- getters类似computed,当state中的值发生改变，getters可以检测到
- modules 模块划分，我们可以将不同类型的公共变量放到不同文件中用state存储，然后将模块导出，再通过modules来管理
接下来看具体的使用
在store文件夹中放一个文件夹，文件夹中新建几个js文件，每个js文件中放的是公共的变量，以及如何去修改变量 文件结构如下 （注 1-4）
假如A文件(testA)中存储了几个组件中需要用到的值
（1）state对象的定义 （注 1-5）
const state = {
test: 0,
color: "#c33"
}
export default {
命名空间，相当于给这个模块取个名字
namespaced: true,
state
}
定义了两个公共变量test color
以上完成了变量的定义和导出，因为将store中的index文件注入到了项目中，现在需要将这个文件在index中导入，在其它页面就可以拿到state中的值了 （ 注 2-1 ）
import Vue from "vue"
import Vuex from "vuex"
import testA from "testA"
import getter form 'getters'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
testA
},
getters
})
export default store
完成这两步，就可以在其它组件拿到state中的值了，拿值通过this.store.state.color,后面如果用getters来监听state中的值，就可以直接this.$store.getters.color ; 假设getters中的文件内容如下: （注 2-2）
const getters = {
test: state => state.testA.test,
color: state => state.testA.color
}
export default getters
导出的getters也需要在index中引入,如（注 2-1）
（2）修改仓库中的值，如何修改state中的变量， 无论是同步处理还是异步处理，必须通过提交mutations来做修改， 代码如下（注3-1）在（注1-5）里面来写
const state = {
test: 0,
color: "#c33"
}
const mutations = {
CHANGE_COLOR: (state,params)=>{
state.color = params
},
CHANGE_TEST: (state,params)=> {
state.test = params
}
}
const actions = {
modifyColor: ({commit,params})=>{
这里可以是ajax请求，用定时器模拟一个异步
setTimeout(()=>{
commit("CHANGE_COLOR",params)
},500)
}
}
export default {
命名空间，相当于给这个模块取个名字
namespaced: true,
state,
mutations,
actions
}
接下来去触发mutations中的方法去修改state中的值，通过this.store.commit("testA/CHANGE_COLOR","red"),用了命名空间需要指出哪个模块下的如testA/CHANGE_COLOR，否则不需要直接this.$store.commit("CHANGE_COLOR","red")
(3) 如果是异步处理，则在actions中去提交commit,就是还是通过commit去触发的函数，不同的是这个commit是在actions中的函数中解构出来的，因此我们直接触发actions中的函数，然后actions中的函数通过commit去触发mutations中的函数，从而起到去修改state中值的作用 代码如上（注 3-1）
触发actions中的函数，通过dispatch来触发 例如去修改上述代码state中color的值
this.$store.dispatch("testA/modifyColor","#cdcdcd")
如果加入了命名空间，需要声明哪个空间下，如果没有命名空间，可直接如下写法：
this.$store.dispatch("modifyColor","#cdcdcd")
vuex的数据流向如下图:
最后测试代码如下图:
