vue中多个组件之间数据同步vuex

在一些项目中有很多数据状态之间要实现数据共享状态共享，例如购物车的数据、用户的登录状态等。最经典的比如像购物车这种在项目中多个位置的引用时就会变得很麻烦，例如项目中使用了三个购物车的组件，那么当其中一个组件的值发生改变时，就要通过自身告诉父组件我的值发生改变了，然后父组件在通知其他两个购物车组件值发生改变了，需要进行同步，这样就会变得很麻烦。而vuex就可以帮助我们解决这个繁琐的问题。

页面结构如下：

如果之前没有安装 vuex，使用下面的命令安装

npm install vuex --save

在项目根目录下新建 store/store.js 文件，这个文件中保存的就是这个应用中需要共享的内容， 而且整个应用中只有一个。

在 main.js 文件中

第一步要引入在main.js中引入 vuex，

第二步注册vuex组件（当然我根据自己的需要来引用滴）

第三步实例化Store

　　state：保存的是原始数据，可以理解为需要共享的数据或状态，

　　getters：可以理解为是staore的计算属性，可以实现就store的计算，但是不能更改。例如你想知道两个值相加、相乘。都是非常不错的选择。

　　mutations：mutations中的方法可以对state中的数据进行改变。

　　action：action中的方法可以调用mutations中的方法，但不可修改state中的原始数据。action中的函数可以使用ajax的技术对服务器进行数据交互。并且可以在回调中使用commit调用mutations中的方法，例如通过context.commit('increment', price)increment是需要调用mutations中的方法名，price是需要传入的参数。 mutations中的方法再去更改state的原始数据。

代码实例
在index.js中，保存需要的数据

如何在组件中获得state数据？

　　在组件内部使用 this.$store.state.属性名即可。

computed: {
   statusIssue () {
     return this.$store.state.notApproveStatus
   }

如何在组件中使用getters内的方法？

computed: {
   getStatus () {
     return this.$store.getters.statusFilter
   }

接着是在action里进行异步请求：

代码片段

changeStatus ({commit}) {
    listIsvUsingGET({ndaStatus: 0}).then(response => {
      let {data} = response.data
      commit('SET_Status', data.total)
    })
  }

mutations.js 文件

代码片段

SET_Status (state, data) {
    state.notApproveStatus = data
  }

如何在组件中使用mutations内的方法？

layout2.vue

isvmanege.vue

代码片段

getNotApprove(){
      listIsvUsingGET({ndaStatus:0}).then(response =>{
        let {data} = response.data
        this.$store.commit('SET_Status', data.total)
      })
    }

当第一个组件改变数据的时候，第二个组件也发生了数据改变

第二种也可以store.dispatch

 

1.  

   // action.js 文件
   increment(context, m) {
   	setTimeout(() => {
   	 context.commit({
   		type: "increment",
   		amout: m.amout
   		})
   	}, 1000)
   }
   
   // 组件中
   <template>
   	<div id="app">
   		<button @click="handleClick">点击调用dispatch</button>
   	</div>
   </template>
   
   
   <script>
   export default {
     name: 'app',
     data() {},
     methods: {
        handleClick(){
            this.$store.dispatch({
   	           type: "increment",
   	           amout: 180
            });
         }
   	}
   }
   </script>