手摸手教你vuex（如何存值、取值、监听数据的变化）

项目需要在两个平行组件间调取值，且需要监听数据的变化。这时用vuex就很恰当。

假设A组件存值，B组件取值，那么接下来分三步：

一、在store里分模块化建立文件夹modules，其下建立文件comm.js

内部文件代码如下：

export default {
    namespaced: true,
    // state状态树,数据源存放地
    state: {
        dataA:[],//数据A
    },
    // getters简化操作
    getters: {
    },
    // 改变state的状态（值），就必须用vue指定唯一方法 mutation
    mutations: {
        SET: (state, obj) => {
            state[obj.key] = obj.value;
        },
    },
    //actions可以包含任意异步操作,
    //actions提交mutation(不是直接变更状态),从而改变state，是改变state的一个增强版
    actions: {
        setA({commit}, dataA) {
            commit('SET', {key: 'dataA', value: dataA});
        },
    }
}

并将此模块导入到src\store\index.js

src\store\index.js里的具体代码如下：

/**
 * Vuex状态管理
 */
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import comm from './modules/comm'

Vue.use(Vuex);

export default new Vuex.Store({
    state: {},
    mutations: {},
    actions: {},
    modules: {
        comm
    },
    getters
})

二、A组件需要将数据存到store里，具体代码如下：

let data = ['1','2','3']
this.$store.dispatch('comm/setA', data);

三、A组件更新了数据，此时B组件就需到store里取数据，B组件的具体代码如下：

import { mapState } from 'vuex';
export default {
	name: "B",
	computed: {
		...mapState({
			dataA:state=>state.comm.dataA 
		}),
		
	}
}

这样，你就可以在方法里直接用了。

如果你还想监听dataA的动态数据变化，就给它加上watch监听，B组件的完整代码如下：

import { mapState } from 'vuex';
export default {
	name: "B",
	computed: {
		...mapState({
			dataA:state=>state.comm.dataA
		}),
		
	},
	watch: {
		dataA(dataA){
			console.log(dataA);
		},
	},
}