Vuex 單狀態庫 與 多模塊狀態庫

之前對 Vuex 進行了簡單的了解。近期在做 Vue 項目的同時重新學習了 Vuex 。本篇博文主要總結一下 Vuex 單狀態庫和多模塊 modules 的兩類使用場景。

本篇所有代碼是基於 Vue-Cli 3.x 版本的腳手架工具進行編寫的。

 

vuex 單狀態庫 Demo

這是一個僅有單個 Vuex store 狀態庫的 Demo。當項目中使用一個 Vuex 狀態庫就已經足夠的時候，可以使用這種方式。

本 Demo 使用了一個 increment 與 decrement 的 增 / 減 事件來體現 store 數據的變化。

 

store.js

由於狀態庫是單一的，僅有一個 store.js 文件管理狀態庫。在該文件中一開始進行 import 的引入，然后使用 Vue.use(Vuex) 使用 Vuex，之后分別定義 state、mutations 和 actions，並通過 export default new Vuex.Store({state, mutations, actions}) 模塊化。

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  count: 1
}

const mutations = {
  increment(state) {
    state.count ++
  },
  decrement(state) {
    state.count --
  }
}

const actions = {
  increment:({commit}) => {
    commit('increment')
  },
  decrement:({commit}) => {
    commit('decrement')
  }
}

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

 

main.js

在入口文件 main.js 中通過 import 引入 store，並注冊到 Vue 的實例上。

import Vue from 'vue'
import App from './App.vue'
import store from './store'

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

// Vue-Cli 2.x
// new Vue({
//   el: '#app',
//   router,
//   store,
//   components: { App },
//   template: '<App/>'
// })

 

使用 $store

在相應的組件中如下引入並在 methods 中使用 mapActions。

<template>
  <div class="vuex">
    Vuex 全局 Store count {{$store.state.count}}
    <button type="button" name="button" @click="increment">加</button>
    <button type="button" name="button" @click="decrement">減</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  methods: mapActions([
    'increment',
    'decrement'
  ])
}
</script>

<style scoped>

</style>

 

Demo

關於單狀態庫的 Demo 請參考此 github
Github Demo

 

vuex 多模塊狀態庫 Demo

當項目變得非常龐大，單個 store 無法滿足需求的時候，可以通過多模塊狀態庫管理多個 store，將各類狀態分類進行維護。

本 Demo 使用了 add 與 reduce 的 增 / 減 事件來體現 store 數據的變化。

 

store

由於需要管理多個 store，因此在項目目錄中創建 store 文件夾，並創建 modules 文件夾用來放置各個 store文件，並使用 index.js 作為入口文件。具體結構請查看 Demo。

 

main.js

同樣在 main.js 中通過 import 引入 store，但這里是引入 index.js 這個入口文件。

import Vue from 'vue'
import App from './App.vue'
import store from './store/index'

 

使用 $store

除了使用方式有一定不同之外，methods 中的 mapActions 也更換了書寫方式，第一個參數是對應 store 管理的數據，第二個參數是關於操作事件的數組。

<template lang="html">
  <div class="a">
    page a  {{$store.state.countA.countA}}

    <button type="button" name="button" @click="add">增加</button>
    <button type="button" name="button" @click="reduce">刪減</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
export default {
  methods: mapActions('countA',['add','reduce'])
}
</script>

<style lang="css">
</style>

 

Demo

關於多模塊狀態庫的 Demo 請參考此 github
Github Demo