柚子快報邀請碼778899分享：vue.js Vuex快速入門
柚子快報邀請碼778899分享：vue.js Vuex快速入門
Vuex
是什么
復(fù)雜場景組件之間通信 vuex是vue的一個狀態(tài)管理工具,狀態(tài)就是數(shù)據(jù) 大白話: vuex是一個插件,可以幫助我們管理 vue通用數(shù)據(jù)(多組件數(shù)據(jù)共享) 場景
某個狀態(tài)在多個組件使用(個人信息)多個組件 共同維護(hù) 一份數(shù)據(jù)(購物車) 優(yōu)勢
數(shù)據(jù)集中化管理響應(yīng)式 vuex遵循單向數(shù)據(jù)流
初始配置
安裝 vuex
npm install vuex@next --save # 對于 Vue 3npm install vuex --save # 對于 Vue2 新建vue模塊
新建store/index.js文件 專門存放 Vuex 創(chuàng)建倉庫 // store/index.js
// 導(dǎo)入 Vuex，它是 Vuex 狀態(tài)管理庫的核心
import Vuex from 'vuex';
// 創(chuàng)建一個新的 Vuex.Store 實例
// 這個實例將作為全局狀態(tài)管理器
export default new Vuex.Store({
// 定義應(yīng)用的狀態(tài)（state）
state: {
// 一個名為 count 的狀態(tài)，初始值為 0
count: 0
},
// 定義更改狀態(tài)的方法（mutations）
mutations: {
// increment 方法用于更新 count 狀態(tài)
// state 是 Vuex state 對象，v 是傳遞給 mutation 的參數(shù)
increment(state, v) {
// 將 count 狀態(tài)更新為傳入的參數(shù) v
state.count = v;
}
},
// 定義異步提交狀態(tài)更改的方法（actions）
actions: {
// increment 方法用于異步提交 increment mutation
increment({ commit }) {
// 調(diào)用之前定義的 increment mutation
commit('increment',10);
}
},
// 定義從狀態(tài)派生的狀態(tài)（getters）
getters: {
// doubleCount 方法返回 count 的兩倍
// state 是 Vuex state 對象
doubleCount(state) {
// 返回 count 狀態(tài)的兩倍
return state.count * 2;
}
}
});
掛載main.js
// main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store/index';
// 使用 Vuex 插件
Vue.use(Vuex);
new Vue({
store,
render: h => h(App)
}).$mount('#app');
配置項
new Vuex.Store({配置項})
配置項類型描述stateObject根狀態(tài)對象，包含所有的狀態(tài)數(shù)據(jù)gettersObject根getter函數(shù)，允許從state派生出一些狀態(tài)mutationsObject同步函數(shù)，用于變更state中的狀態(tài)數(shù)據(jù)在 ;Vue 3 中，mutations 應(yīng)改為 actions 和 commit，因為 Vue 3 的 Vuex 4 中不再使用 mutations。actionsObject異步操作或復(fù)雜邏輯的提交（調(diào)用mutation）的包裹函數(shù)modulesObject命名空間模塊對象，用于將store分割成模塊pluginsArray自定義插件數(shù)組，用于進(jìn)一步處理 actionsstrictBoolean是否開啟嚴(yán)格模式，開啟后在mutation之外修改state將拋出錯誤devtoolsBoolean / Object是否啟用 Vue Devtools 支持，可以傳遞選項對象
state
根狀態(tài)對象，包含所有的狀態(tài)數(shù)據(jù) 核心配置項(必要的) 獲取數(shù)據(jù)
通過this.$store.屬性名通過 import 導(dǎo)入 store 然后使用
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // 使用 Vuex 插件
const store = new Vuex.Store({
state: {
count: 1
},
});
getters
根getter函數(shù)，允許從state派生出一些狀態(tài)對數(shù)據(jù)進(jìn)一步,派生狀態(tài)使用
$store.getters.filterList()
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // 使用 Vuex 插件
const store = new Vuex.Store({
state: {
list: [1,2,3,4,5,6,7,8,9]
},
getters:{
//過濾 <= 5 的數(shù)據(jù)
filterList(state){
return state.list.filter(item=> item > 5)
}
}
});
mutations/actions
用于變更state中的狀態(tài)數(shù)據(jù) actions:異步操作或復(fù)雜邏輯的提交（調(diào)用mutation）的包裹函數(shù) Mutations：通常使用全小寫字母，并且可以使用下劃線來分隔單詞，例如 update_count。
第一個參數(shù)是state也就是狀態(tài) ,通過state 來調(diào)用數(shù)據(jù) Actions：可以使用駝峰命名法，并且通常在名稱中包含動詞，以表明它們執(zhí)行的操作，例如 updateCount。
第一個參數(shù)是context 是上下文,和 state相似
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex); // 使用 Vuex 插件
const store = new Vuex.Store({
state: {
count: 10
},
actions: {
async updateCount({ commit }, n) {
commit('update_count', n);
},
async updateCount2(context, n) {
context.commit('update_count', n);
}
},
mutations: {
//可以同名,但是不推薦
update_count(state, n) {
state.count = n;
}
}
});
export default store;
modules
分模塊
Vue 使用單一狀態(tài)樹,當(dāng)項目比較大時,狀態(tài)會集中,從而導(dǎo)致項目臃腫將vuex配置文件導(dǎo)入 根配置下的 modules 就可以了
導(dǎo)入模塊
// store/modules/user.js
const state = { ... };
const mutations = { ... };
const actions = { ... };
const getters = { ... };
export default {
state,
mutations,
actions,
getters
};
// store/index.js 根模塊
import Vuex from 'vuex';
import user from './modules/user';
const store = new Vuex.Store({
modules: {
user
}
});
export default store;
使用
子模塊state
$store.state.模塊名.屬性名mapState映射: mapState('模塊名',['屬性名']); this.屬性名 就可以訪問數(shù)據(jù)了 子模塊getters
$store.getters['模塊名/屬性名稱']mapGetters映射: mapGeters(‘模塊名’,[‘屬性名’,‘屬性2’]) this.屬性名 就可以獲得數(shù)據(jù)模塊名/屬性名稱:是因為命名是時候就是這命名的 子模塊mutations
$store.commit['模塊名/屬性名稱']mapMutations映射: mapMutations(‘模塊名’,[‘函數(shù)名’,‘函數(shù)2’]) this.函數(shù)名() 就可以調(diào)用函數(shù)了模塊名/屬性名稱:是因為命名是時候就是這命名的 子模塊actions
$store.dispatch['模塊名/屬性名稱'] mapActions映射: mapActions(‘模塊名’,[‘函數(shù)名’,‘函數(shù)名2’]) this.函數(shù)名() 就可以調(diào)用函數(shù)了 模塊名/屬性名稱:是因為命名是時候就是這命名的
數(shù)據(jù)的更改
this.$emit() 是 Vue 組件中用來觸發(fā)自定義事件的方法。當(dāng)調(diào)用 this.$emit('eventName', param) 時，它會向父組件發(fā)出一個事件，父組件可以監(jiān)聽這個事件并做出響應(yīng)。同步:
而在 Vuex 中，this.$store.commit('mutationName', param) 用于觸發(fā)狀態(tài)變更。這里的 commit 方法用于調(diào)用 store 中定義的 mutations，mutations 是同步函數(shù)，用于更改 store 中的狀態(tài)（state）。 異步:
this.$store.dispatch('actionName', payload) 來分發(fā) actions。這會告訴 Vuex 執(zhí)行相應(yīng)的 action 函數(shù)。
輔助函數(shù)
mapState
將store中的數(shù)據(jù),自動映射到 組件的 計算屬性中可以直接this.屬性名 來訪問數(shù)據(jù)
//引入mapState
import { mapState } from 'vuex';
//使用
export default {
computed: {
// 使用對象展開運(yùn)算符將所有映射的狀態(tài)轉(zhuǎn)為計算屬性
...mapState([
// 映射 this.count 為 store.state.count
'count'
]),
// 映射 this.doubleCount 為 store.getters.doubleCount
...mapState({
'doubleCount': state => state.count * 2
})
}
}
//-------------------
computed:{ ...mapState['狀態(tài)名'] }
//# 等價
computed:{ '狀態(tài)名'(){
return this.$store.state.count
}}
mapMutatuons
將mutations同步函數(shù) 中的方法,映射到 methods中可以直接this.函數(shù)名(n) 來調(diào)用函數(shù)
//引入 mapMutatuons
import {mapMutatuons} from 'vuex'
//使用
export default {
methods: {
...mapMutations([
'update_count' // 直接使用 mutation 名稱
]),
...mapMutations({
'set_count': 'update_count' // 為 mutation 提供一個別名
}),
increment() {
this.update_count(1); // 調(diào)用 Vuex store 的 mutation
},
decrement() {
this.set_count(-1); // 使用別名調(diào)用 mutation
}
}
}
//---------------------------------
methods:{
...mapMutations(['方法名'])
}
//等價
methods:{
'方法名'(參數(shù)){
this.$store.commit('方法名',參數(shù))
}
}
mapActions
將actions異步操作中的方法,映射到 methods中可以直接this.函數(shù)名(n) 來調(diào)用函數(shù)
//導(dǎo)入mapActions
import { mapActions } from 'vuex';
//使用
export default {
methods: {
...mapActions([
'UpdateCount' // 將 `this.update_count` 映射為 `this.$store.update_count('actionName',obj)`
]),
...mapActions({
'mappedActionName': 'UpdateCount' // 將 `this.mappedActionName` 映射為 `this.$store.dispatch('update_count')`
}),
}
}
//--------------------
methods:{
..,mapActions([方法名])
}
# 等價
methods:{
'方法名'(參數(shù)){
this.$store.dispatch('方法名',參數(shù))
}
}
mapGetters
將getters中的函數(shù) 中的方法,映射到 computed中可以直接this.函數(shù)名(n) 來調(diào)用函數(shù)
示例
柚子快報邀請碼778899分享：vue.js Vuex快速入門
精彩文章
本文內(nèi)容根據(jù)網(wǎng)絡(luò)資料整理，出于傳遞更多信息之目的，不代表金鑰匙跨境贊同其觀點和立場。
轉(zhuǎn)載請注明，如有侵權(quán)，聯(lián)系刪除。
Zoodmall跨境動物坊
