Vuex 是一個專爲 Vue.js 應用程序開發的狀態管理模式。它採用集中式存儲管理應用的全部組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。vue
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;
},
}
});
複製代碼
main.js
掛載 Vuex
import store from './vuex'
Vue.prototype.$store = store
複製代碼
import { mapState, mapMutations } from 'vuex';
export default {
computed: {
...mapState(['customBar', 'statusBar']),
},
methods: {
...mapMutations(['doIt'])
}
}
複製代碼
vuex
裏要設置的數據太多,懶得一個一個寫,因此就這樣寫了一個方法setState
:android
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)
複製代碼
正常寫法:ios
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;
},
}
複製代碼