Vuex · 寫法

Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

1. 根目錄下新建 vuex 目錄，在 vuex 目錄下建立 index.js 定義狀態值

import Vue from 'vue'
import Vuex from 'vuex';
Vue.use(Vuex);

export default new Vuex.Store({
	state: {
		platform: '', //系統：android ios
		statusBar: '', //狀態欄高度
		customBar: '', //自定義欄高度
	},
	mutations: {
		setState: (state, obj) => {
			console.log(state, obj)
			state[obj.name] = obj.value;
		},
		setPlatform: (state, obj) => {
			state.platform = obj;
		},
		setStatusBar: (state, obj) => {
			state.statusBar = obj;
		},
		setCustomBar: (state, obj) => {
			state.customBar = obj;
		},
	}
});

複製代碼

2. 而後，在 main.js 掛載 Vuex

import store from './vuex'  
Vue.prototype.$store = store  
複製代碼

3.最後，在頁面引入

import { mapState, mapMutations } from 'vuex';
export default { 
    computed: {
        ...mapState(['customBar', 'statusBar']),
    },
    methods: {  
        ...mapMutations(['doIt'])  
    }  
}
複製代碼

---

vuex 裏要設置的數據太多，懶得一個一個寫，因此就這樣寫了一個方法setState：

let colorList = [{},{}]
this.$store.commit('setState',{name:'colorList',value:this.colorList})
複製代碼

mutations: {
    setState: (state, obj) => {
    	console.log(state, obj)
    	state[obj.name] = obj.value;
    },
}
複製代碼

封裝一下

export function setState(name,value) {
    this.$store.commit('setState',{name:name,value:value})
}

this.setState('statusBar', this.StatusBar)
this.setState('customBar', this.CustomBar)
複製代碼

正常寫法：

this.$store.commit('setStatusBar',this.StatusBar)
this.$store.commit('setCustomBar',this.CustomBar)
複製代碼

mutations: {
    setStatusBar: (state, obj) => {
    	state.statusBar = obj;
    },
    setCustomBar: (state, obj) => {
    	state.customBar = obj;
    },
}	
複製代碼