規範化的使用vuex

安裝vuex

vuex 的使用必須保證先安裝 vuex,使用vue腳手架搭建工程的話可以直接勾上 vuex 選項，額外添加可以輸入指令

npm install vuex --save

創建 根目錄/src/store/modules/modules1.js(項目大了可拆分更多模塊)

const modules1 = {
  state: {
    // 定義組件通用狀態
    commonState: 0
  },
  mutations: {
    // 通過傳入載荷commonState的值改變通用狀態
    SET_COMMONSTATE: (state, commonState) => {
      state.commonState = commonState
    }
  },
  getters: {
    // 定義commonState計算獲取狀態倉庫中當前模塊的commonState
    commonState: state => state.commonState
  },
  actions: {
    // 定義setCommonState方法異步調用突變函數setCommonState來改變狀態倉庫中module1中的commonState
    setCommonState: ({ commit }, commonState) => {
      return commit('SET_COMMONSTATE', commonState)
    }
  }
}
export default modules1

創建 根目錄/src/store/index.js

// 引入vue
import Vue from 'vue'

// 引入vuex
import Vuex from 'vuex'

// 引入modules1模塊化通用庫（可按項目實際要求增減，將特定組件的通用變量做模塊化拆分）
import modules1 from './modules1/modules1.js'

// Vue使用依賴模塊
Vue.use(Vuex)

// 實例化Vuex.Store,將modules1模塊掛載到Store進去（可掛載多個模塊如modules2、modules3...），最後將整個Store暴露出去
export default new Vuex.Store({
  modules: {
    modules1
  }
})

在 根目錄/src/main.js中

// 引入vue
import Vue from 'vue'

// 引入vuex的store數據庫
import store from './store/index.js'

// 實例化vue單文件應用
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

創建 根目錄/src/util/mixin.js

import { mapGetters, mapActions } from "vuex"
export const modules1Mixin = {
  computed: {
    ...mapGetters([
      'commonState'
    ])
  },
  methods: {
    ...mapActions([
      'setCommonState'
    ])
  }
}

單文件組件中獲取/設置通用變量commonState

<template>
  <div>
    <!-- 可以像調用計算屬性一樣調用commonState -->
    <div>
      組件一通用變量當前值:{{commonState}}
    </div>
    <button @click='add'>自增</button>
    <button @click='sub'>自減</button>
  </div>
</template>

<script>
import { modules1Mixin } from '../util/mixin.js'
export default {
  // 混入modules1的通用變量及函數(如果還需要modules2等其他模塊的通用變量，可加到mixins的[]中用逗號隔開)
  mixins: [modules1Mixin],
  methods: {
    add () {
      // 異步設置commonState自增
      this.setCommonState(this.commonState + 1)
    },
    sub () {
      // 異步設置commonState自減
      this.setCommonState(this.commonState - 1)
    }
  }
}
</script>

<style lang="sass" scoped>
</style>