Vuex使用

VueX多组件共享数据

Vuex的使用，需要多个页面能修改/引用相同的数据，并且能够被修改的时候。比如：

添加进购物车当中的数据；在商品详情页将商品加入购物车，然后把商品数据存储在vuex当中，购物车页面需要根据vuex当中存储的数据来渲染页面。而且在购物车当中可以对数据进行更改（删除商品，修改商品属性）等等，修改完成后会重新渲染页面。

VueX原理

安装： Vuex npm i vuex 默认为4 修改版本 npm i vuex@3

vue2 用vuex3

vue3 用vuex4

         上图就是工作方式，由VC对象当中发出dispatch / commit 请求。

        VC对象挂载（一般情况下都是mounted）的时候，触发dispatch ，他有两个参数 （'方法名' , { }）方法名是在action当中定义好的方法名，要用引号包裹住（'方法名'）。第二个参数是你传如action当中的参数，（比如添加进入购物车的商品对象），可以是一个，也可以是多个。一个不需要对象写法，多个需要对象写法。

        在action当中进行的是 逻辑判断 / 异步请求（）。action当中的方法有两个参数（context, value）value就是VC对象挂在的时候传进来的数据。context就相当于一个mini版store。可以通过context获取getters 以及 state 当中的数据。context.commit('方法名', 参数)提交到mutation当中。

        在mutation当中进行数据的存储。mutation当中的方法有两个参数，state value，同样的value也是传进来的参数，state就是vuex当中存储数据的对象。对象当中设置属性来存储不同的数据。用法state.属性。

        getters就相当于一个 ‘ 计算属性 ’  ，它会根据数据的改变而重新计算你想要获取的数据（比如购物车当中的总价）。

        如果不需要进行逻辑判断或者异步任务请求，就可以直接在VC对象当中使用commit方法，直接提交到mutation当中。虽然上图中并未画出这条线，但是确实是真实存在的。

       

        注意：

        一般来讲，在action当中定义的方法名都是小写，而在mutation当中定义的方法名一般都是大写。相当于一种约定，希望各位能够养成良好的习惯。取值部分在另外一篇哦！