[Vue] Vuex学习总结

一、Vuex概念

官网：Vuex 是什么？

理解：

1. Vuex是为了保存组件之间共享数据而诞生的，如果组件之间有要共享的数据，可以直接挂载到vuex中，不必通过父子组件之间传值，组件内部私有的数据，只要放到组件的data中即可，没有必要放到vuex中
2. 熟悉vue的应该知道，组件间的传值的方式是根据组件间的关系来定的。比如父组件向子组件传值通过props，而子组件向父组件传值通过on()自定义事件，然后在子组件中通过emit()函数来触发该自定义函数，兄弟组件间的传值，则可以event bus来达到目的。
3. 如果组件间的关系层次很深的话，那就很麻烦让人头疼。所以为了解决这个传值的问题，Vuex的思路是将应用中所有状态，以及其更改的逻辑都集中在一个单独的对象中，并且这个对象可以在根组件中注册，这样，所有的下层子组件都能够获得这个对象中的状态。不论组件之间的关系是什么样的，状态都从Vuex的这个对象中去获取，而不用过多关注组件之间的关系了。

二、Vuex使用

1. 运行
   cnpm i vuex -S
2. 在main.js 导入包
   import vuex from 'vuex'
3. 注册vuex到vue中
   Vue.use(Vuex)
4. 创建实例，得到一个数据仓储对象
   var store=new Vuex.Store({})

使用:
减少

var store = new Vuex.Store({
    state: {
        // 相当于data
        // 访问store中的数据，只能通过this.$store.state.***来访问
        count: 0
    },
    mutations: {
        // 注意：如果组件想要调用mutations中的方法，只能使用 this.$store.commit('方法名')
        // 这种调用mutations方法的格式，与this.$emit("父组件中方法名") 一致 
        add(state) {
            state.count++;
        },
        reduce(state, dataObj) {
            //    注意：mutations的函数参数列表中，只支持两个参数，参数一为state状态，参数二为通过commit提交过来的的参数
            // store.count=store.count-dataObj.a-dataObj.b;
            state.count -= (dataObj.a + dataObj.d);
        }
    },
    getters:{//相当于computed
        // 注意：这里的getters只负责对外提供参数，不负责修改数据，如果想要修改state中的数据，请去找mutations
        optCount:function(state){
            return '当前最新的count为：'+state.count
        }
        // getters中的方法，和组件中的过滤器比较类似，因为过滤器和getters都没有修改原数据，都是把原数据做了一层包装，提供给了调用者；
        // 其次，getters也和computed比较像，只要state中的数据发生变化了，如果getters正好引用了这个数据，那么就会立即触发getters的重新求值；
    }

})

总结：

1. state中 的数据，不能直接修改，如要修改需要通过mutations
2. 获取数据
   如果组件想要直接从state上需要this.$store.state.数据名称
3. 同步操作
   使用mutations： this.$store.commit('方法名称'，唯一的一个参数obj)
4. 数据包装
   使用getters： this.$store.getters.方法名称
   如果store中的state上的数据，在对外提供时需要加一层包装，推荐使用getters，
5. 异步操作
   使用actions：this.$store.dispatch('方法名称', 唯一的一个参数obj)
   在actions中调用 mutation 方法异步的改变 state 状态。

三、区别

• props: 父组件传递过来的数据
• data： 组件内部私有数据
• vuex：组件之间共享的数据

参考链接：
https://blog.csdn.net/qq_38910842/article/details/103174870
https://blog.csdn.net/zhq2005095/article/details/66477902