一起學(xué)習(xí)Vuex 4.0的狀態(tài)管理（Vite）

本文目錄

簡(jiǎn)單介紹vite,搭建vite項(xiàng)目。

安裝vuex

Vuex基礎(chǔ)介紹

使用Vuex

插件引入

1.簡(jiǎn)單介紹vite,搭建vite項(xiàng)目

1.1什么是vite?

Vite是一種新型前端構(gòu)建工具，能夠顯著提升前端開發(fā)體驗(yàn)。它主要由兩部分組成：

一個(gè)開發(fā)服務(wù)器，它基于 原生 ES 模塊 提供了 豐富的內(nèi)建功能，如速度快到驚人的 模塊熱更新（HMR）。

一套構(gòu)建指令，它使用 Rollup 打包你的代碼，并且它是預(yù)配置的，可輸出用于生產(chǎn)環(huán)境的高度優(yōu)化過的靜態(tài)資源。

Vite 意在提供開箱即用的配置，同時(shí)它的 插件 API 和 JavaScript API 帶來了高度的可擴(kuò)展性，并有完整的類型支持。

Vite 將會(huì)使用 esbuild 預(yù)構(gòu)建依賴。Esbuild 使用 Go 編寫，并且比以 JavaScript 編寫的打包器預(yù)構(gòu)建依賴快 10-100 倍。

1.2初始化vite

npm init vite@latest

1.3新建第一個(gè)vite項(xiàng)目

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式 + 庫(kù)。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。

2.安裝vuex

npm install vuex@next --save

3.Vuex基礎(chǔ)介紹

3.1 vuex

每一個(gè) Vuex 應(yīng)用的核心就是 store（倉(cāng)庫(kù)）。“store”基本上就是一個(gè)容器，它包含著你的應(yīng)用中大部分的狀態(tài) (state)。Vuex 和單純的全局對(duì)象有以下兩點(diǎn)不同：

Vuex 的狀態(tài)存儲(chǔ)是響應(yīng)式的。當(dāng) Vue 組件從 store 中讀取狀態(tài)的時(shí)候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會(huì)相應(yīng)地得到高效更新。

你不能直接改變 store 中的狀態(tài)。改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation。這樣使得我們可以方便地跟蹤每一個(gè)狀態(tài)的變化，從而讓我們能夠?qū)崿F(xiàn)一些工具幫助我們更好地了解我們的應(yīng)用。

主要包含五個(gè)部分：State、Getters、Mutations、Actions、Module。

3.1.1 State概念

Vuex 使用單一狀態(tài)樹——是的，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)。至此它便作為一個(gè)“唯一數(shù)據(jù)源 (SSOT)”而存在。這也意味著，每個(gè)應(yīng)用將僅僅包含一個(gè) store 實(shí)例。單一狀態(tài)樹讓我們能夠直接地定位任一特定的狀態(tài)片段，在調(diào)試的過程中也能輕易地取得整個(gè)當(dāng)前應(yīng)用狀態(tài)的快照。

3.1.2 分割模塊（module）

由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。

為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割：由此此處分割為兩個(gè)狀態(tài)管理模塊。（test和test1模塊）。

//store/test.js export const test = { namespaced: true, state: { name: '叫我詹躲躲', gender: '男', profession: '前端開發(fā)', age: 10 } } //store/test1.js export const test1 = { namespaced: true, state: { name: '二月', sport: '跑步、代碼和音樂', publics:'叫我詹躲躲', amount:100 }, }

3.1.3命名空間（namespaced）

默認(rèn)情況下，模塊內(nèi)部的 action 和 mutation 仍然是注冊(cè)在全局命名空間的——這樣使得多個(gè)模塊能夠?qū)ν粋€(gè) action 或 mutation 作出響應(yīng)。Getter 同樣也默認(rèn)注冊(cè)在全局命名空間，但是目前這并非出于功能上的目的（僅僅是維持現(xiàn)狀來避免非兼容性變更）。必須注意，不要在不同的、無命名空間的模塊中定義兩個(gè)相同的 getter 從而導(dǎo)致錯(cuò)誤。

如果希望你的模塊具有更高的封裝度和復(fù)用性，你可以通過添加 namespaced: true 的方式使其成為帶命名空間的模塊。

3.1.4 Getters定義

有時(shí)候我們需要從 store 中的 state 中派生出一些狀態(tài),如：

//store/test.js export const test = { namespaced: true, state: { name: '叫我詹躲躲', gender: '男', profession: '前端開發(fā)', age: 10 }, //從state派生的一些狀態(tài)，可以將該部分抽離出來成函數(shù)方便調(diào)用 getters: { getUserInfo: state => { return state.name + '的職業(yè)是' + state.profession }, getUserSex: state => { return state.name + '的性別是' + state.gender } }, } //store/test1.js export const test1 = { namespaced: true, state: { name: '二月', sport: '跑步、代碼和音樂', publics:'叫我詹躲躲', amount:100 }, getters: { getSport: state => { return state.name + '喜歡的運(yùn)行是' + state.sport }, getPublics: state => { return state.name + '的公眾號(hào)是' + state.publics } }, }

3.1.5.mutations定義

更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的事件類型 (type)和一個(gè)回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)：

//store/test.js export const test = { namespaced: true, state: { name: '叫我詹躲躲', gender: '男', profession: '前端開發(fā)', age: 10 }, //從state派生的一些狀態(tài)，可以將該部分抽離出來成函數(shù)方便調(diào)用 getters: { getUserInfo: state => { return state.name + '的職業(yè)是' + state.profession }, getUserSex: state => { return state.name + '的性別是' + state.gender } }, mutations: { testMutation1(state) { // 變更狀態(tài) state.age++; }, // 第二個(gè)參數(shù)是載荷 testMutation2(state, payload) { state.age += payload.content; } }, } //store/test1.js export const test1 = { namespaced: true, state: { name: '二月', sport: '跑步、代碼和音樂', publics:'叫我詹躲躲', amount:100 }, getters: { getSport: state => { return state.name + '喜歡的運(yùn)行是' + state.sport }, getPublics: state => { return state.name + '的公眾號(hào)是' + state.publics } }, mutations: { test1Mutation1(state) { state.amount++; }, // 第二個(gè)參數(shù)是載荷 test1Mutation2(state, payload) { state.amount += payload.amount; } }, }

3.1.6.actions定義

Action 類似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接變更狀態(tài)。

Action 可以包含任意異步操作。

//store/test.js export const test = { namespaced: true, state: { name: '叫我詹躲躲', gender: '男', profession: '前端開發(fā)', age: 10 }, //從state派生的一些狀態(tài)，可以將該部分抽離出來成函數(shù)方便調(diào)用 getters: { getUserInfo: state => { return state.name + '的職業(yè)是' + state.profession }, getUserSex: state => { return state.name + '的性別是' + state.gender } }, mutations: { testMutation1(state) { // 變更狀態(tài) state.age++; }, // 第二個(gè)參數(shù)是載荷 testMutation2(state, payload) { state.age += payload.content; } }, actions: { testAction1(context) { context.commit('testMutation1'); }, //通過參數(shù)解構(gòu)來簡(jiǎn)化代碼，testAction1簡(jiǎn)化為testAction2寫法 testAction2({ commit }, payload) { commit({ type: 'testMutation2', content: payload.content }); } } } //store/test1.js export const test1 = { namespaced: true, state: { name: '二月', sport: '跑步、代碼和音樂', publics:'叫我詹躲躲', amount:100 }, getters: { getSport: state => { return state.name + '喜歡的運(yùn)行是' + state.sport }, getPublics: state => { return state.name + '的公眾號(hào)是' + state.publics } }, mutations: { test1Mutation1(state) { state.amount++; }, // 第二個(gè)參數(shù)是載荷 test1Mutation2(state, payload) { state.amount += payload.amount; } }, actions: { test1Action1(context) { context.commit('test1Mutation1'); }, test1Action2({ commit }, payload) { commit({ type: 'test1Mutation1', content: payload.content }); } } }

已經(jīng)維護(hù)了store倉(cāng)庫(kù)，在組件中使用我們的狀態(tài)。

4.狀態(tài)使用

4.1 引入

//store/index.js 內(nèi)容 import { createStore } from "vuex"; import { test } from "./modules/test"; import { test1 } from "./modules/test1"; export const store = createStore({ // Vuex允許store分割成小的module,每個(gè)模塊擁有自己的state、mutation、action、getter; // 訪問test的狀態(tài)：store.state.test modules: { test, //store模塊1 test1 //store模塊2 } });

main.js使用

//main.js import { createApp } from 'vue' import App from './App.vue' import { store } from './store' let app = createApp(App) app.use(store).mount('#app')

4.2 組件中使用狀態(tài)

4.2.1 使用state

test里面的狀態(tài)

//test里面的狀態(tài)

1.test模塊state的狀態(tài)

{{userName}}

{{userInfo}}

test1里面的狀態(tài)

4.2.2 使用getters

test模塊getters的狀態(tài)

2.test模塊getters的狀態(tài)

{{getUserInfo}}

{{getUserSex}}

//獲取getters const getUserInfo = computed(() => store.getters['test/getUserInfo']) const getUserSex = computed(() => store.getters['test/getUserSex'])

test1模塊getters的狀態(tài)

2.test1模塊getters的狀態(tài)

{{getSport}}

{{getPublics}}

//獲取getters const getSport = computed(() => store.getters['test1/getSport']) const getPublics = computed(() => store.getters['test1/getPublics'])

4.2.3 使用mutations

用mutations改變test模塊age的狀態(tài)

3.用mutations改變test模塊age的狀態(tài)

改變test狀態(tài)（age）

{{age}}

//通過mutations改變狀態(tài),改變test模塊的age const age = computed(() => store.state.test.age) const testClick = () => { store.commit('test/testMutation1') }

用mutations改變test1模塊amount的狀態(tài)

3.用mutations改變test1模塊amount的狀態(tài)

改變test1狀態(tài)（amount）

{{amount}}

//通過mutations改變狀態(tài),改變test1模塊的amount const amount = computed(() => store.state.test1.amount) const test1Click = () => { store.commit('test1/test1Mutation1') }

4.2.4 使用actions

用actions改變test模塊age的狀態(tài)

4.用actions改變test模塊age的狀態(tài)

改變test狀態(tài)（age）

{{age}}

//通過actions改變狀態(tài),改變test模塊的age const changeActions = () => { store.dispatch('test/testAction1') }

用actions改變test1模塊amount的狀態(tài)

4.用actions改變test1模塊amount的狀態(tài)

改變test狀態(tài)（amount）

{{amount}}

//通過actions改變狀態(tài),改變test模塊的amount const changeActions1 = () => { store.dispatch('test1/test1Action1') }

完整的Demo示例

5.插件

Vuex 的 store 接受 plugins 選項(xiàng)，這個(gè)選項(xiàng)暴露出每次 mutation 的鉤子。Vuex 插件就是一個(gè)函數(shù)，它接收 store 作為唯一參數(shù)：

const myPlugin = (store) => { // 當(dāng) store 初始化后調(diào)用 store.subscribe((mutation, state) => { // 每次 mutation 之后調(diào)用 // mutation 的格式為 { type, payload } }) }

5.1 使用插件

const store = createStore({ plugins: [myPlugin] })

以上是vuex的使用和部分參數(shù)的解釋，每天進(jìn)步一點(diǎn)點(diǎn)，歡迎一起學(xué)習(xí)交流。我是叫我詹躲躲。文章不定期更新到 個(gè)人博客（https://zhanhongzhu.top）、掘金、思否和微信公眾號(hào)【叫我詹躲躲】。一起精進(jìn)，一起成長(zhǎng)。

參考文章

vuex中文文檔：https://vuex.vuejs.org/zh/

Node.js Vue

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。

版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。