Vuex 的配置編寫
Vuex 是什么？
這里我們來看看官方網(wǎng)站是如何介紹 Vuex 的：
提示
這是與 Vue 3 匹配的 Vuex 4 的文檔。如果您在找與 Vue 2 匹配的 Vuex 3 的文檔，請在這里查看。
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式 + 庫。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。
什么是“狀態(tài)管理模式”？
讓我們從一個簡單的 Vue 計數(shù)應用開始：
const Counter = {
// 狀態(tài)
data () {
return {
count: 0
}
},
// 視圖
template: `
<div>{{ count }}</div>
`,
// 操作
methods: {
increment () {
this.count++
}
}
}
createApp(Counter).mount('#app')
這個狀態(tài)自管理應用包含以下幾個部分：
- 狀態(tài)，驅(qū)動應用的數(shù)據(jù)源；
- 視圖，以聲明方式將狀態(tài)映射到視圖；
- 操作，響應在視圖上的用戶輸入導致的狀態(tài)變化。
以下是一個表示“單向數(shù)據(jù)流”理念的簡單示意：
但是，當我們的應用遇到多個組件共享狀態(tài)時，單向數(shù)據(jù)流的簡潔性很容易被破壞：
- 多個視圖依賴于同一狀態(tài)。
- 來自不同視圖的行為需要變更同一狀態(tài)。
對于問題一，傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力。對于問題二，我們經(jīng)常會采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝。以上的這些模式非常脆弱，通常會導致無法維護的代碼。
因此，我們?yōu)槭裁床话呀M件的共享狀態(tài)抽取出來，以一個全局單例模式管理呢？在這種模式下，我們的組件樹構(gòu)成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為！
通過定義和隔離狀態(tài)管理中的各種概念并通過強制規(guī)則維持視圖和狀態(tài)間的獨立性，我們的代碼將會變得更結(jié)構(gòu)化且易維護。
這就是 Vuex 背后的基本思想，借鑒了 Flux、Redux 和 The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設計的狀態(tài)管理庫，以利用 Vue.js 的細粒度數(shù)據(jù)響應機制來進行高效的狀態(tài)更新。
如果你想交互式地學習 Vuex，可以看這個 Scrimba 上的 Vuex 課程，它將錄屏和代碼試驗場混合在了一起，你可以隨時暫停并嘗試。
什么情況下我應該使用 Vuex？
Vuex 可以幫助我們管理共享狀態(tài)，并附帶了更多的概念和框架。這需要對短期和長期效益進行權(quán)衡。
如果您不打算開發(fā)大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的 store 模式就足夠您所需了。但是，如果您需要構(gòu)建一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會成為自然而然的選擇。引用 Redux 的作者 Dan Abramov 的話說就是：
Flux 架構(gòu)就像眼鏡：您自會知道什么時候需要它。
安裝 Vuex
我們可以使用下面的方式來安裝 Vuex：
使用 npm 包管理器安裝：
npm install vuex@next --save
使用 Yarn 包管理器安裝：
yarn add vuex@next --save
在這里我們選擇 npm 安裝：
開始使用 Vuex
安裝完成之后，就可以開始使用 vuex 了。我們先在 /src 中創(chuàng)建 /store 文件夾，并創(chuàng)建 js 文件 action.js , index.js , mutations-types.js , mutations.js。如下圖所示：
新建目錄結(jié)構(gòu)如上圖。從文件名可以看出其對應的作用，下面我們來編寫對應的代碼。
Action 文件
即圖中的 action.js 文件。里面存放著各個 action，每個 action 都對應一個 mutation，下面是 action.js 文件的完整代碼：
export default {
// 展示下拉框
showDropList({ commit }, data) {
commit("SHOW_DROP_LIST", data);
},
// 更新編輯區(qū)內(nèi)容
updateContent({ commit }, data) {
commit("UPDATE_CONTENT", data);
},
// 更新選擇的值
updateSelectValue({ commit }, data) {
commit("UPDATE_SELECTED_VALUE", data);
},
// 更新菜單狀態(tài)
updateMenuStatus({ commit }, data) {
commit("UPDATE_MENU_STATUS", data);
},
// 執(zhí)行命令
execCommand({ commit }, data) {
commit("EXEC_COMMAND", data);
},
// 獲取節(jié)點位置
getNodePosition({ commit }, data) {
commit("NODE_POSITION", data);
},
// 切換視圖
changeView({ commit }, data) {
commit("CHANGE_VIEW", data);
},
};
Mutations-types 文件
為了讓整個項目的 mutation 可以很方便的查看和管理，我們將全部的 Mutation 事件類型的名字使用常量來代替，并將它們單獨存放在一個文件中，對外提供導出接口。
mutations-types.js 代碼內(nèi)容如下：
export const SHOW_DROP_LIST = "SHOW_DROP_LIST";
export const UPDATE_CONTENT = "UPDATE_CONTENT";
export const UPDATE_SELECTED_VALUE = "UPDATE_SELECTED_VALUE";
export const UPDATE_MENU_STATUS = "UPDATE_MENU_STATUS";
export const EXEC_COMMAND = "EXEC_COMMAND";
export const CHANGE_VIEW = "CHANGE_VIEW";
export const NODE_POSITION = "NODE_POSITION";
在 action 中提交的 mutation 的名字，和這里的名字是保持一致的。
Mutation 文件
在這個文件中，定義了很多 mutation 用于改變 store 中的數(shù)據(jù)。在 action 中提交的 mutation 都將在這里真正生效。
首先，我們需要從mutations-types 中導入 mutation 的事件名稱。這里使用對象結(jié)構(gòu)的方式操作：
mutations.js 代碼內(nèi)容如下：
// 導入事件類型
import {
// 下拉框事件類型
SHOW_DROP_LIST,
// 更新編輯區(qū)內(nèi)容事件類型
UPDATE_CONTENT,
// 更新選擇的值事件類型
UPDATE_SELECTED_VALUE,
// 更新菜單狀態(tài)事件類型
UPDATE_MENU_STATUS,
// 執(zhí)行命令事件類型
EXEC_COMMAND,
// 獲取節(jié)點位置事件類型
NODE_POSITION,
// 切換視圖事件類型
CHANGE_VIEW,
} from "./mutations-types";
// 定義處理各個事件類型的回調(diào)函數(shù)
export default {
[SHOW_DROP_LIST]({ menuBar }, data) {
// 下拉框事件類型對回調(diào)函數(shù)
for (let menu in menuBar) {
if (menuBar[menu].showDropList !== undefined) {
if (data && data.name === menu) {
menuBar[menu].showDropList = data.display;
} else {
menuBar[menu].showDropList = false;
}
}
}
},
[UPDATE_CONTENT](state, data) {
// 更新編輯區(qū)內(nèi)容事件類型
state.content = data;
},
[UPDATE_MENU_STATUS]({ menuBar }, data) {
// 更新菜單狀態(tài)事件類型
if ("all" in data) {
for (let menu in menuBar) {
menuBar[menu].status = data.all;
}
return;
}
for (let name in data) {
if (menuBar[name].showStatus) {
menuBar[name].status = data[name];
} else {
menuBar[name].status = "default";
}
}
},
[UPDATE_SELECTED_VALUE]({ menuBar }, data) {
// 更新選擇的值事件類型
menuBar[data.name].value = data.value;
},
[EXEC_COMMAND](state, data) {
// 執(zhí)行命令事件類型
state.command = data;
},
[CHANGE_VIEW](state, data) {
// 切換視圖事件類型
state.sourceView = data;
},
[NODE_POSITION](state, data) {
// 獲取節(jié)點位置事件類型
state.position = {
top: data.top,
right: data.right,
bottom: data.bottom + document.body.scrollTop,
left: data.left,
};
},
};
Index
這個文件是保存數(shù)據(jù)的地方，狀態(tài)數(shù)據(jù)的改變最終都會作用到里面的數(shù)據(jù)。 store 對象的實例也由這個文件導出。
index.js 的代碼內(nèi)容如下：
import { createStore } from "vuex";
// 導入一些依賴模塊
import mutations from "./mutations";
import action from "./action";
import Menu from "@/config/menu";
import Config from "@/config/index";
let menuBar = {}; // 菜單欄對象
let menu = Menu.getMenu(); // 獲取全部菜單項配置信息
let config = Config.getConfig(); // 獲取全部配置項
let viewMenu = config.viewMenu; // 獲取可見的菜單項
viewMenu.forEach(function (name) {
menuBar[name] = {};
// 是否有下拉框
if (menu[name].dropList) {
menuBar[name].value = "";
menuBar[name].showDropList = false;
} else {
// 是否展示狀態(tài)
if (menu[name].showStatus) {
menuBar[name].showStatus = true;
}
menuBar[name].status = "default";
}
});
export default createStore({
state: {
// 編輯區(qū)域內(nèi)容
content: config.container.content,
// 菜單欄對象，包含菜單項狀態(tài)數(shù)據(jù)
menuBar,
// 是否源碼視圖
sourceView: false,
//執(zhí)行的命令
command: {
name: "",
value: "",
},
//存放位置信息
position: {
top: 0,
right: 0,
bottom: 0,
left: 0,
},
},
getters: {},
mutations: mutations,
actions: action,
modules: {},
});
以上所有操作完成之后，我們的 vuex 就配置完成了。不過目前還不能在組件中使用，因為還沒將它注入到組件中去。在組件中使用 vuex 的方式有兩種，一種是在每個單獨的組件中都實例化一個 store 對象，然后對 store 實例對象進行操作。另外一種方式是通過在根組件處注入 store 實例，其他所有子組件可通過 this.$store 來訪問到 store 實例對象，并進行操作。推薦使用第二種方式，更加簡單方便。
我們修改一下入口文件 src/main.js，注冊 Vuex 實列 srore 對象：文章來源：http://www.zghlxwxcb.cn/news/detail-813630.html
import { createApp } from 'vue'
import App from './App.vue'
import store from './store';
createApp(App).use(store).mount('#app')
ok，這樣我們的項目就引入了 Vuex 了。文章來源地址http://www.zghlxwxcb.cn/news/detail-813630.html
到了這里，關于【富文本編輯器實戰(zhàn)】03 Vuex 的配置編寫的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
