vuex

一、概念

vuex是为了保存组件之间的共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，而不必通过父子组件之间传值了；如果组件的数据不需要共享，此时，这些不需要共享的私有数据，没必要放到vuex中

• 只有共享的数据，才有权利放到vuex中，组件内部私有的数据，放到组件中data上即可。
• Vuex是一个全局的共享数据存储区域，就相当于是一个数据的仓库

props、data和vuex的区别：

props中存放的是父组件传递过来的值
data中存放的是组件的私有数据
vuex中存放的是组件之间共享的数据

二、配置vuex的步骤

1. 运行npm install vuex --save
2. 导入Vuex,并注册到Vue上

import Vuex from 'vuex'
Vue.use(Vuex)

3. new Vuex.Store(),得到一个数据仓储对象

const store = new Vuex.Store({
    state:{
        //state是专门用来存储数据的，类似data
        count:2
    },
    mutations:{
        increment(state){
            state.count ++;
        },
        decrease(state,obj){
            state.count -= (obj.c+obj.d);
        }
    },
    getters:{
        optCount:function(state){
            return "当前的数值是：" + state.count
        }
    }
})

4. 将vuex创建的store挂载到vm实例上，这时任何组件都能使用store来存取数据

总结

1. 如果在组件中想要访问store中的数据，只能通过this.$store.state.***
2. 如果要操作store中的state值，只能通过调用mutations提供的方法，通过this.$store.commit('方法名'，按需传递唯一的一个参数)
3. mutations的函数参数列表，最多只能传两个参数。第一个参数只能是state状态，第二个参数是通过commit提交过来的参数
4. 如果state中的数据对外提供时，需要做一层包装，推荐使用getters，通过this.$store.getters.***

• getters只负责对外提供数据，不负责修改数据
• getters中的方法，和组件中的过滤器类似，它们都没有修改原数据，而是把原数据做一层包装，供给调用者
• getters和computed也比较像，只要state中的数据发生变化了。这时，如果getters正好也引用 了这个数据，就会立即触发getters重新求值