寫了一個(gè)基于 Vue 1 和 iView 的前端項(xiàng)目饿序，用 Vuex 做了狀態(tài)管理勉失，分享一下 Vuex 比較重要的知識(shí)點(diǎn)和踩到的坑。有一些個(gè)人見解在里邊原探，不周之處希望大家批評(píng)指正乱凿。
Vuex 組成
Vuex in Vue.js
- 一個(gè) Vuex 組件由三部分組成：
- state: 狀態(tài)信息（包括應(yīng)用的屬性、狀態(tài)咽弦、數(shù)據(jù)等）
- mutations: 對(duì) state 的操作（添加徒蟆、修改等）由 mutations 執(zhí)行而不是直接以賦值的形式修改。
- actions: 應(yīng)用程序通過調(diào)用 actions 觸發(fā) mutations型型。（也可以直接dispatch一個(gè) mutation 后专，但是不建議這樣做。）
Vuex 原則
- 在程序初始化的時(shí)候盡可能聲明全部的 state输莺，并且賦一個(gè)初始值。
- action 不修改 state裸诽，而是 dispatch 一個(gè) mutation嫂用，如果有額外參數(shù)，可以作為 payload 傳遞給 mutation 丈冬。
- state 是只讀的嘱函，只有 mutation 可以修改 state，其余任何函數(shù)都無權(quán)修改埂蕊，也不應(yīng)該嘗試修改 state 往弓。直接對(duì) state 進(jìn)行的修改會(huì)影響 Vuex 對(duì)視圖更新的判斷疏唾。
- 其實(shí)不必把所有的狀態(tài)信息全部放到 vuex 中，有一些組件局部的屬性可以不放在 vuex 中函似，比如：
- 控制組件視圖中元素樣式的變量（比如 SPA 中控制導(dǎo)航欄的 active 狀態(tài)的變量）
- 控制組件視圖中彈窗提示是否顯示的變量槐脏。
- 這些變量本身只與視圖相關(guān)，且不受其他組件的影響撇寞，也不需要暴露接口以供修改顿天，所以完全可以放在組件的 data 中，這樣做也可以從一定程度上減少代碼量蔑担。
Vuex 在項(xiàng)目中的目錄結(jié)構(gòu)與代碼劃分
Project Structure
- 全局共享的 state 和 mutation 建議放在 store 中牌废，比如：登錄狀態(tài)，access-token 啤握。
- 某些組件自身的 state 較多鸟缕，或者 state 結(jié)構(gòu)比較復(fù)雜，可以為其單獨(dú)設(shè)置一個(gè) module排抬，降低全局 state 的結(jié)構(gòu)復(fù)雜度懂从。比如：用戶注冊(cè)組件。
- 顯式的聲明 mutation-type 和 actions 有助于代碼的檢查和維護(hù)畜埋，開發(fā)者可以通過 mutation-types 文件清晰地了解到該項(xiàng)目包含哪些狀態(tài)（數(shù)據(jù)）更新操作莫绣。
-
一個(gè)運(yùn)用了 Vuex 的單頁(yè)應(yīng)用：
vuex in SPA
遇到的問題
-
在
<template>之外調(diào)用 vuex 相關(guān)資源:- actions: 引入
actions和store后直接調(diào)用（組件內(nèi)不用引用store）。（要傳遞 store 作為參數(shù)） - state: 組件外引入
store后使用store.state悠鞍，組件內(nèi)使用this.$store.state对室。
- actions: 引入
-
Vuex 自動(dòng)為在
<template>之中被調(diào)用的 action 傳遞了 store 對(duì)象，在其之外調(diào)用 action 時(shí)咖祭，要將 store 顯式的作為參數(shù)傳入以供函數(shù)使用（解構(gòu)）掩宜。// 在 util 等 Vue 組件外的工具類中 actions.updateDirList(store, response.data); // 在 Vue 組件內(nèi) actions.updateStatus(this.$store, status); -
Vuex 更新表單
- 使用
on-change事件觸發(fā)actions用于更新與表單項(xiàng)對(duì)應(yīng)的state。 - 保存在組件本地的
data中么翰，提交時(shí)更改state牺汤。 -
切記不要直接更新
store.state，會(huì)觸發(fā)錯(cuò)誤提示浩嫌。
- 使用
附：文檔截圖
