建站
咨詢
售后
建站咨詢
新聞中心
一、基礎(chǔ)
npm install vuex@next --save
二、核心概念
Vuex中核心概念主要有五個(gè)：State、Getters、Mutations、Actions、Modules，每一部分都有自己的功用，下面先來看一段簡單的代碼，該代碼中涉及到了這些核心概念，然后在該代碼的基礎(chǔ)上進(jìn)一步理解。
10年的金寨網(wǎng)站建設(shè)經(jīng)驗(yàn)，針對設(shè)計(jì)、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時(shí)及時(shí)工作處理。全網(wǎng)營銷推廣的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整金寨建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計(jì)，從而大程度地提升瀏覽體驗(yàn)。成都創(chuàng)新互聯(lián)公司從事“金寨網(wǎng)站設(shè)計(jì)”,“金寨網(wǎng)站推廣”以來，每個(gè)客戶項(xiàng)目都認(rèn)真落實(shí)執(zhí)行。
// index.js文件
import {createStore} from "vuex";
import {moduleA} from "./module/moduleA";
export const store = createStore({
// Vuex允許將store分割成模塊（module），每個(gè)模塊擁有自己的state、mutation、action、getter、甚至是嵌套子模塊
// 訪問moduleA的狀態(tài)：store.state.moduleA
modules: {
moduleA
}
});
// module/moduleA.js文件
// 對于模塊內(nèi)部的mutation和getter，接收的第一個(gè)參數(shù)是模塊的局部狀態(tài)對象
// 對于模塊內(nèi)部的action，局部狀態(tài)通過context.state暴露出來，根節(jié)點(diǎn)狀態(tài)則為context.rootState
// 對于模塊內(nèi)部的getter，根節(jié)點(diǎn)狀態(tài)會作為第三個(gè)參數(shù)暴露出來
// 在帶命名空間的模塊內(nèi)訪問全局內(nèi)容
// 如果希望使用全局state和getter，rootState和rootGetters會作為第三和第四個(gè)參數(shù)傳入getter，也會通過context對象的屬性傳入action
// 若需要在全局命名空間內(nèi)分發(fā)action或提交mutation，將{root: true}作為第三個(gè)參數(shù)傳給dispatch或commit即可。
export const moduleA = {
// 默認(rèn)情況下，模塊內(nèi)部的action、mutation和getter是注冊在全局命名空間的，如果希望模塊具有更高的封裝度和復(fù)用性，可以通過添加namespaced:true的方式使其成為帶命名空間的模塊
namespaced: true,
state: {
testState1: 'xxxx',
testState2: {
a: 0,
b: 1
},
testState3: 0
},
// 有的時(shí)候需要從store中的state中派生出一些狀態(tài)，此時(shí)可以將該部分抽象出一個(gè)函數(shù)供多處使用。
// Vuex允許在store中定義getter，像計(jì)算屬性一樣，getter的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)他的依賴值發(fā)生了改變才會被重新計(jì)算
getters: {
// getter接收state作為其第一個(gè)參數(shù)
testGetter1: state => {
return state.testState1 + state.testState3;
},
// getter可以接受其他getter作為第二個(gè)參數(shù)
testGetter2: (state, getters) => {
return getters.testGetter1.length;
}
},
// 更改Vuex的store中的狀態(tài)的唯一方法是提交mutation，每個(gè)mutation都有一個(gè)字符串的事件類型和一個(gè)回調(diào)函數(shù)，該回調(diào)函數(shù)接收state作為第一個(gè)參數(shù)，提交的載荷作為第二個(gè)參數(shù)
// 以相應(yīng)的type調(diào)用store.commit方法來觸發(fā)相應(yīng)的回調(diào)函數(shù)
// Mutation必須是同步函數(shù)
mutations: {
testMutation1(state) {
// 變更狀態(tài)
state.testState3++;
},
// 第二個(gè)參數(shù)是載荷
testMutation2(state, payload) {
state.testState1 += payload.content;
}
},
// Action提交的是mutation，而不是直接變更狀態(tài)
// Action可以包含任意異步操作
// Action函數(shù)接受一個(gè)與store實(shí)例具有相同方法和屬性的context對象，因此可以調(diào)用context.commit提交一個(gè)mutation，或者通過context.state和context.getters來獲取state和getters。
// Action通過store.dispatch方法觸發(fā)
actions: {
testAction1(context) {
setTimeout(() => {
context.commit('testMutation1');
}, 1000);
},
testAction2({commit}, payload) {
setTimeout(() => {
commit({
type: 'testMutation2',
content: payload.content
});
}, 1000);
}
}
};
State
Vuex使用單一狀態(tài)樹保存所有數(shù)據(jù)，作為唯一數(shù)據(jù)來源。如上所示代碼，其包含了testState1、testState2、testState3，在組件中如何獲取這些數(shù)據(jù)呢?(Vue3.x語法)
組件三
{{testState1}}
{{testState2}}
{{testState3}}
Getters
有的時(shí)候需要從store中的state中派生出一些狀態(tài)，此時(shí)可以將該部分抽象出一個(gè)函數(shù)供多處使用。Vuex允許在store中定義getter，像計(jì)算屬性一樣，getter的返回值會根據(jù)它的依賴被緩存起來，且只有當(dāng)他的依賴值發(fā)生了改變才會被重新計(jì)算。
組件三
// ……{{testGetter1}}
{{testGetter2}}
Mutations
更改Vuex的store中的狀態(tài)的唯一方法是提交mutation，每個(gè)mutation都有一個(gè)字符串的事件類型和一個(gè)回調(diào)函數(shù)，該回調(diào)函數(shù)接收state作為第一個(gè)參數(shù)，提交的載荷作為第二個(gè)參數(shù)。(注意：Mutation必須是同步函數(shù))
組件三
// ……
Actions
Actions類似于mutation，但是仍然有一些不同點(diǎn)，一方面其提交的是mutation，而不是直接變更狀態(tài);另一方面Action可以包含任意異步操作。
組件三
// ……
Modules
由于使用單一狀態(tài)樹，應(yīng)用的所有狀態(tài)都會集中到一個(gè)較大的對象，當(dāng)應(yīng)用變的復(fù)雜時(shí)store會變的很難維護(hù)，為了解決該問題，Vuex允許將store分割成模塊(module)，每個(gè)模塊擁有自己的state、mutation、action、getter、甚至是嵌套子模塊，具體使用可見第二節(jié)中開頭部分的代碼，其中包含了其常見的使用方式。
三、插件
3.1 插件基礎(chǔ)
Vuex在實(shí)例化store的時(shí)候可以接受plugins選項(xiàng)，該選項(xiàng)可以添加一系列的插件，插件就可以幫助我們完成一系列的工作，節(jié)省人力和物力，下面我們自定義一個(gè)簡單的插件并調(diào)用該插件。
// plugins/myPlugin.js
// 插件接收唯一的參數(shù)store
const myPlugin = store => {
// store上有一系列的方法，可以用在插件中https://next.vuex.vuejs.org/zh/api/#commit
// 注冊一個(gè)動態(tài)模塊用registerModule
// 替換store的根狀態(tài)用replaceState
// 監(jiān)聽mutation的變化，該處理函數(shù)會在每個(gè)mutation完成后調(diào)用，接收mutation和經(jīng)過mutation后的狀態(tài)作為參數(shù)
store.subscribe((mutation, state) => {
console.log(mutation);
});
};
export default myPlugin;
// index.js
import {createStore} from "vuex";
import myPlugin from "./plugins/myPlugin";
export const store = createStore({
// ……
// 一個(gè)數(shù)組，包含應(yīng)用在store上的插件方法，這些插件直接接收store作為唯一參數(shù)，可以監(jiān)聽mutation或者提交mutation
plugins: [myPlugin]
});
3.2 數(shù)據(jù)持久化插件
Vuex的狀態(tài)存儲并不能持久化，只要一刷新頁面數(shù)據(jù)就丟失了，此時(shí)可引入vuex-persist插件來解決該問題，其會將狀態(tài)保存至cookie或者localStorage中。
import {createStore} from "vuex";
import VuexPersistence from "vuex-persist";
import myPlugin from "./plugins/myPlugin";
// 利用該插件可實(shí)現(xiàn)對store數(shù)據(jù)的持久化
const vuexLocal = new VuexPersistence({
storage: window.localStorage
});
export const store = createStore({
// ……
// 一個(gè)數(shù)組，包含應(yīng)用在store上的插件方法，這些插件直接接收store作為唯一參數(shù)，可以監(jiān)聽mutation或者提交mutation
plugins: [myPlugin, vuexLocal.plugin]
});
本文轉(zhuǎn)載自微信公眾號「前端點(diǎn)線面」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端點(diǎn)線面公眾號。
分享標(biāo)題：用最簡的方式學(xué)Vuex，你學(xué)會了嗎?
網(wǎng)頁URL：http://www.dlmjj.cn/article/dhgdsoh.html
