Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序設(shè)計(jì)的狀態(tài)管理模式，它幫助開(kāi)發(fā)者更有效地管理組件間共享的狀態(tài)。在 Vue 項(xiàng)目中使用 Vuex，可以解決復(fù)雜應(yīng)用中狀態(tài)管理的困擾，確保狀態(tài)變更的可追蹤性和一致性。

1、Vuex 核心概念

1. State（狀態(tài)）: 存儲(chǔ)應(yīng)用中多個(gè)組件共享的數(shù)據(jù)。這是單一的源頭，使得組件能夠讀取狀態(tài)，但不能直接修改它。
2. Getters（獲取器）: 類似于 Vue 中的計(jì)算屬性，用于從 Store 的 State 中派生出一些狀態(tài)，可以認(rèn)為是 Store 的讀取方法。
3. Mutations（突變）: 用于改變 State 的唯一方式。每個(gè) Mutation 都有一個(gè)字符串類型的事件類型 (type) 和一個(gè)回調(diào)函數(shù) (handler)，該函數(shù)接收 State 作為第一個(gè)參數(shù)。
4. Actions（動(dòng)作）: Action 提交的是 Mutation，而不是直接改變狀態(tài)。Action 可以包含任意異步操作，如調(diào)用 API。
5. Modules（模塊）: 當(dāng)應(yīng)用變得非常大時(shí)，可以通過(guò)模塊來(lái)分割 Store，每個(gè)模塊有自己獨(dú)立的 State、Mutation、Action 和 Getter。

2、安裝 Vuex

npm install vuex --save

或

yarn add vuex

3、初始化 Vuex Store

在 src 目錄下新建 store 文件夾，創(chuàng)建一個(gè)名為 store.js 的文件，初始化 Vuex Store：

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);export default new Vuex.Store({state: {count: 0},mutations: {increment(state) {state.count++;},decrement(state) {state.count--;}},actions: {increment({ commit }) {commit('increment');},decrement({ commit }) {commit('decrement');}},getters: {count: state => state.count}
});

4、在 Vue 應(yīng)用中使用 Store

• 在 main.js 中引入并使用 Store：

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import store from './store';Vue.config.productionTip = false;new Vue({store,render: h => h(App),
}).$mount('#app');

• 在組件中訪問(wèn) Store：

<template><div><p>{{ count }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
export default {computed: {count() {return this.$store.state.count;}},methods: {increment() {this.$store.commit('increment');},decrement() {this.$store.commit('decrement');}}
};
</script>

5、使用 Getters

<template><div><p>{{ count }}</p></div>
</template><script>
export default {computed: {count() {return this.$store.getters.count;}}
};
</script>

6、使用 Actions

<template><div><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script>
export default {methods: {increment() {this.$store.dispatch('increment');},decrement() {this.$store.dispatch('decrement');}}
};
</script>

7、模塊化 Store

隨著應(yīng)用變得越來(lái)越復(fù)雜，你可能希望將 Vuex Store 拆分成模塊。每個(gè)模塊可以擁有自己的 state、mutations、actions 和 getters。

// src/store/modules/counter.js
const state = {count: 0
};const mutations = {increment(state) {state.count++;},decrement(state) {state.count--;}
};const actions = {increment({ commit }) {commit('increment');},decrement({ commit }) {commit('decrement');}
};const getters = {count: state => state.count
};export default {state,mutations,actions,getters
};

然后在 store/index.js 中引入模塊：

// src/store/index.js
import Vue from 'vue';
import Vuex from 'vuex';
import counter from './modules/counter';Vue.use(Vuex);export default new Vuex.Store({modules: {counter}
});

以上就是在 Vue 項(xiàng)目中使用 Vuex 的基礎(chǔ)流程。通過(guò)這種方式，你可以輕松地管理和維護(hù)應(yīng)用程序的全局狀態(tài)，使?fàn)顟B(tài)變更更加清晰可控。隨著應(yīng)用規(guī)模的增長(zhǎng)，合理劃分模塊和優(yōu)化狀態(tài)管理策略會(huì)變得更加重要。

如您在閱讀中發(fā)現(xiàn)不足，歡迎留言！！！