什么情況下使用vuex
Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗余的。如果您需要構建是一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，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.jsimport 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.xnew 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
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
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
