Vue中使用Vuex

使用场景

• 基于父子、兄弟组件，我们传值会比较方便。但是，如果是没有关联的组件之间要使用同一组数据，就显得很无能为力，这时候vuex就能解决我们的问题；
• 它相当于一个公共仓库，保存着所有组件都能共用的数据；

1. store/index.js

import Vue form "vue"
import Vuex form "vuex"

Vue.use(Vuex);

export default new Vuex.Store({
	state:{
		pathName: "",
		currDbSource: {},
		currJobData: {},
		DbSource: []
	},
	mutations:{
		savePath(state,pathName){
			state.pathName = pathName;
		},
		saveCurrDbSource(state,currDbSource){
			state.currDbSource = currDbSource;
		},
		saveCurrJobData(state,currJobData){
			state.currJobData = currJobData;
		},
		saveDbSource(state,DbSource){
			state.DbSource = DbSource;
		}
	}
})

• state是自定义的一些变量，需要用来保存数据；
• mutations是用来触发事件，相当于方法，用户需要通过触发这个方法，借此来保存数据；
• 第二个参数就是用户传入的值，然后在方法中赋值给state中的变量。

2. main.js引用

import store form './store/index'；

new Vue({
	el: '#app',
	router,
	store,
	render: h => h(App)
});

3. 保存数据
   （譬如点击按钮后，需要把当前的数据保存到vuex中，然后跳转到别的路由，使用这些数据）

methods:{
	click(){
		this.$store.commit('saveCurrDbSource',this.db)	
	}
}

• 第一个参数是要触发的方法，也就是mutations中的方法，第二个参数是传递的数据；

4. 获取变量

this.$store.state.变量名

• 这样其他组件就可以共用这个保存起来的数据了，也能进行相应的修改。

模块化

• actions：间接触发mutations方法的“中间商”，而且它可以执行异步操作，避免用户去直接操作state。

1. state.js：保存数据，以对象的方式导出

export default {
  pathName: '', // 路由
};

2. mutations.js：保存方法，用来改变state的数据

// 保存当前菜单栏的路径
export const savePath = (state, pathName) => {
  state.pathName = pathName;
};

3. actions.js：暴露给用户使用，借此触发mutations中的方法，保存数据（可执行异步操作）

//触发保存菜单栏的路径方法
export const savePath = ({commit}, payload) => {
	commit('savePath', payload);
};
或
export const savePath = (context, payload) => {
	context.commit('savePath', payload);
}

• 一种是直接通过commit，另一种是通过context上下文来触发事件，第二个参数用以保存数据，不然保存到vuex的数据就是空值。

4. index.js：引入相应模块，暴露出store，供vue注册后全局使用

import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
import * as actions from './actions';
import * as mutaions from './mutations';

Vue.use(Vuex);

export default new Vuex.Store({
	state,
	actions,
	mutations
});

5. main.js中引入index.js

import store from './store/index'

new Vue({
	el: '#app',
	router,
	store,
	render: h => h(App)
});

6. 保存数据

import { mapActions } from 'vuex';

// 方法一（dispatch）
this.$store.dispatch('saveDbSource', this.DbSource);

// 方法二（映射）
// 1.通过methods方法添加映射关系
methods: {
	...mapActions(['saveDbSource'])
}
// 2.使用
this.saveDbSource

• 方法一直接操作，通过dispatch派发给actions，让actions去触发；
• 方法二通过在methods中添加映射关系，数组方式，意味着我们可以在数组中写多个方法，然后在需要使用的地方直接this.方法名即可。

7. 获取数据

import { mapState } from 'vuex';

computed: {
	...mapState(['DbSource'])
    // 推荐写法如下：
    //...mapState({
    //    DbSource: state => state.DbSource,
    //    phoneMap: state => state.richCommunicationSuite.phoneMap, // 模块化写法
    //}),
},
watch: {
	DbSource(currVal) {
		// 监听mapState中的变量，当数据变化（有值、值改变等），
        // 保证能拿到完整的数据，不至于存在初始化没有数据的问题，然后可以赋给本组件data中的变量
      this.currVal = currVal;
	}
}

• 通过计算属性，当数据发生改变，我们可以保证拿到的是响应过后的数据，也是数组形式，意味着我们可以拿到多组数据，这里数组中的数据也是state.js中定义的变量。
• 组件派发任务到actions，actions触发mutations中的方法，然后mutations来改变state中的数据，数据变更后响应推送给组件，组件重新渲染。