Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式 + 庫。
它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。
簡單解釋就是它是用來放項目所有組件都能共享的數(shù)據(jù)用的私杜。
首先安裝vuex：
npm i vuex -s
封裝vuex的目錄結(jié)構(gòu)如下圖：
圖1
【./src/store】：用來存放封裝 vuex 相關(guān)文件的文件夾；
【./src/store/index.js】：封裝 vuex 的主體文件娃殖，創(chuàng)建全局store，存放全局使用共享的數(shù)據(jù)萧锉。
代碼：
import { createStore } from 'vuex'
import state from './components/state'
import actions from './components/actions'
import getters from './components/getters'
import mutations from './components/mutations'
import modA from './storeModules/modA.js'
// 全局store,存放全局使用共享的數(shù)據(jù)
// 注意：全局模塊中不需要開啟命名空間
export default createStore({
? state,? ? ? ? // 設(shè)置的初始屬性值
? getters,? ? ? // 實時監(jiān)聽state值的變化(最新狀態(tài))
? mutations,? ? // 定義mutations珊随，用于修改狀態(tài)(同步)
? actions,? ? ? // 定義actions，用于修改狀態(tài)(異步)
? // 局部模塊
? modules: {
? ? modA
? }
})
注意：
1.全局模塊中不需要開啟命名空間柿隙。
2.state 是設(shè)置的初始屬性值，項目中的狀態(tài)變化也會更新 state鲫凶。
3.getters 實時監(jiān)聽state值的變化(最新狀態(tài))禀崖。
4.mutations 用于修改狀態(tài)(同步)。
5.actions 用于修改狀態(tài)(異步)螟炫。
6.modules 用來引入不同模塊數(shù)據(jù)波附。
【./src/store/components/state.js】：
代碼：
// .vue文件可以通過 store 獲取初始狀態(tài)數(shù)據(jù)
const state = {
? ? names: '月影WEB',
? ? ages:18
}
// vue2
// ----this.$store.state.names
// vue3
// ----import { useStore } from 'vuex'
// ----const store = useStore()
// ----store.state.names
export default state;
注意：
1.【.vue】文件可以通過 store 獲取初始狀態(tài)數(shù)據(jù)。
2.【vue2】可以通過 this.$store.state.names 或者 this.$store.state.ages 來獲取 state 狀態(tài)中的數(shù)據(jù)昼钻。
3.【vue3】獲取 state 中的數(shù)據(jù)方式如下：
import { useStore } from 'vuex'
const store = useStore()
console.log(store.state.names)
console.log(store.state.ages)
【./src/store/components/getters.js】：
代碼：
// 實時監(jiān)聽state值的變化(最新狀態(tài))掸屡，
// 只是用來方便監(jiān)聽最新的state的變化
const getters = {
? ? isShow(state) {? // 承載變化的 names 的值
? ? ? ? return state.names
? ? },
? ? getChangeAges(state){? //承載變化的 ages 的值
? ? ? ? return state.ages
? ? }
}
// vue2
// ----this.$store.getters.getChangeAges
// vue3
// ----import { useStore } from 'vuex'
// ----const store = useStore()
// ----store.getters.getChangeAges
export default getters;
注意：
1.實時監(jiān)聽 state 值的變化(最新狀態(tài))。
2.【vue2】可以通過 this.$store.getters.isShow 或者 this.$store.state.getChangeAges 來實時監(jiān)聽 state 狀態(tài)中的數(shù)據(jù)變化然评。
3.【vue3】實時監(jiān)聽 state 中的數(shù)據(jù)方式如下：
import { useStore } from 'vuex'
const store = useStore()
console.log(store.getters.isShow)
console.log(store.getters.getChangeAges)
【./src/store/components/mutations.js】：
代碼：
// 定義mutations仅财，用于修改狀態(tài)(同步)
// 自定義改變state初始值的方法，這里面的參數(shù)除了state之外還可以再傳額外的參數(shù)(變量或?qū)ο?;
const mutations = {
? changesNames(state) {? // 自定義改變state初始值的方法碗淌，這里面的參數(shù)除了state之外還可以再傳額外的參數(shù)(變量或?qū)ο?;
? ? state.names = '月影WEB-改變';
? },
? newAges(state,sum){ // 同上盏求，這里面的參數(shù)除了state之外還傳了需要增加的值sum
? ? state.ages += sum;
? }
}
// vue2
// ----this.$store.commit('changesNames')
// vue3
// ----import { useStore } from 'vuex'
// ----const store = useStore()
// ----store.commit('changesNames')
export default mutations;
注意：
1.用于修改狀態(tài)(同步)。
2.【vue2】可以通過 this.$store.commit('changesNames') 或者this.$store.commit('newAges')? 來修改 state 狀態(tài)中 names 和 ages 的數(shù)據(jù)亿眠。
3.【vue3】修改 state 中的數(shù)據(jù)方式如下：
import { useStore } from 'vuex'
const store = useStore()
store.commit('changesNames')
store.commit('newAges')
【./src/store/components/actions.js】：
代碼：
// 定義actions碎罚，用于修改狀態(tài)(異步)
const actions = {
? ? changesNames(context) {? // 自定義觸發(fā)mutations里函數(shù)的方法，context與store 實例具有相同方法和屬性
? ? ? context.commit('changesNames');
? ? },
? ? getNewAges(context,num){? // 同上注釋纳像，num為要變化的形參
? ? ? ? context.commit('newAges',num)
? ? }
}
// vue2
// ----this.$store.dispatch('getNewNum',1)
// vue3
// ----import { useStore } from 'vuex'
// ----const store = useStore()
// ----store.dispatch('getNewNum',1)
export default actions;
注意：
1.用于修改狀態(tài)(異步)
2.【vue2】可以通過 this.$store.dispatch('changesNames') 或者this.$store.dispatch('getNewAges')? 來調(diào)用 actions.js 中對應(yīng)的方法進而修改 state 狀態(tài)中的數(shù)據(jù)荆烈。
3.【vue3】調(diào)用 actions.js 中對應(yīng)的方法進而修改 state 中的數(shù)據(jù)方式如下：
import { useStore } from 'vuex'
const store = useStore()
store.dispatch('changesNames')
store.dispatch('getNewNum',1)
【./src/store/components/storeModules】：此文件夾下放各局部模塊的 state 等等。
代碼：
// ceshi 模塊的內(nèi)容
const state = {
? ? // ceshi 模塊的數(shù)據(jù)
};
const mutations = {
? ? // ceshi 模塊的 mutations
};
const actions = {
? ? // ceshi 模塊的actions
};
export default {
? ? namespaced: true, // 開啟命名空間
? ? state,
? ? actions,
? ? mutations
}
注意：局部模塊多一個開啟命名空間竟趾。
以上代碼就已經(jīng)對 Vuex 進行了簡單的封裝了憔购。
接下去就如何使用 Vuex 封裝的代碼了？
1.在【./src/index.js 】文件中引用封裝的 Vuex 潭兽。
如下圖：
圖2
2.在【./src/App.vue】文件中測試 Vuex 封裝的效果倦始。
如下圖：
圖3
頁面效果圖如下：
圖4
