技術標籤：javascripthtml

vuex在vue專案中主要用於全域性的變數儲存，包含著應用中的大部分狀態，當把所用的狀態集中到同一個store物件中時，store物件會變得非常臃腫，這時，專案往往會將store物件分割成一個個模組，每個模組擁有自己的state、mutation、getter、action，之後對其進行整合。

一、程式碼樣例

在src目錄下建立資料夾store，資料夾中建立子資料夾modules，用於存放不同模組；同時建立檔案getters.js，此檔案的用處後面會講到；建立檔案index.js作為最後的整合檔案。

1、modules

本文以user.js為例，建立一個關於獲取使用者資訊的狀態。

// user.js檔案
const user = {
	state: {
		userInfo: {},
		isLogin: '',
		count: '',		// 只是用於演示getter作用而已
	},
	mutations: {
		SET_USER_INFO: (state, userInfo) => {
			state.userInfo = userInfo;
			state.isLogin = true;
			sessionStorage.setItem('userInfo', JSON.stringify(userInfo));
		},
		CLEAR_USER: (
 
state) => {
			state.userInfo = {};
			state.isLogin = false;
			sessionStorage.removeItem('userInfo');
		}
	}
}
export default user;

2、getters

const getters = {
	count: state => state.user.count++;
}
export default getters;

到了這裡你或許可以看出來getters的作用，就是在我們獲取某個全域性狀態值之前，對該值進行處理，類似於元件中的computed。
在getters中定義的屬性，如果想要拿到它的值，就需要在元件中使用mapGetters

3、index.js整合

import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user';
import getters from './getters';

const store = new Vuex.Store({
	modules: {
		user
	},
	getters
});
export default store;

最後，不要忘了在main.js中使用

new Vue({
    router,
    store,
    render: h => h(App)
}).$mount('#app')

到了此步，專案中的store我們就定義好了，那麼如何在元件中進行使用呢

二、使用store中的變數

• 未經過getters處理的變數，直接通過mapState獲取

import { mapState } from 'vuex';
// ...
computed: {
	...mapState(['user']),
}
// ...
// 使用：
console.log(this.user.userInfo);

• 經過getters處理的變數，通過mapGetters獲取

import { mapGetters } from "vuex";
// ...
computed: {
    ...mapGetters(['count']),
},
// 使用
console.log(this.count);

三、使用mutations中的方法

const userInfo = {
	userName: 'admin',
};
this.$store.commit('SET_USER_INFO', userInfo);

大概就是這麼多了，對於actions以後再來補充。