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