PS: Vuex 對于很多初入門Vue的來說，入門困難搭综，感覺非常繞。
Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。
在改造之前悍募，我們的做法大都是如下寫法：
繞過多層后，才真正修改到數(shù)據(jù)洋机。
改造之前 Vuex的基本用法和介紹
import Vue from "vue"
import Vuex from "vuex"
// State
var state = {
name: 'Pi'
}
// Mutation - 同步
var mutations = {
setName: (state, newName) => {
state.name = newName
}
}
// Action - 異步
var actions = {
// commit是vuex返回的異步函數(shù)坠宴，可以調(diào)用mutations中的函數(shù)
setName: ({ commit }, newName) {
// 用法一：同步
commit('setName', newName)
// 用法二: 異步
ajax.get('xxx你的接口').then(res => {
commit('setName', res)
})
}
}
// Getter
var getters = {
getName (state) {
// 用法一：直接返回state中的值
return state.name
// 用法二：調(diào)取存在其他位置的值
return localStorage.getItem('name')
// 用法三：根據(jù)接口返回 - 需要getName.then() 監(jiān)聽
return new Promise((resolve, reject) => {
ajax.get('xxx你的接口').then(res => {
resolve(res)
})
})
}
}
// 導(dǎo)出
export default {
state,
mutations,
actions
}
Vuex的一些規(guī)則：
應(yīng)用層級的狀態(tài)應(yīng)該集中到單個 store 對象中。
提交 mutation 是更改狀態(tài)的唯一方法绷旗，并且這個過程是同步的喜鼓。
-
異步 邏輯都應(yīng)該封裝到 action 里面。
為什么要繞一層Mutations去改變State衔肢？因為Actions可以創(chuàng)建多個函數(shù)來修改同一個State屬性的內(nèi)容庄岖，尤其是N個組件處理，你將不知道哪里最終生效角骤，誰最先執(zhí)行隅忿，所以Mutations也可以做為一層網(wǎng)關(guān)。
進(jìn)入正題，開始改造Vuex
-
安裝Vuex-Convert（個人整理的開源庫背桐，內(nèi)容簡單优烧，可以自己擴(kuò)展，地址放底部）
npm i vuex-convert 項目內(nèi)任意位置牢撼，創(chuàng)建一個store.js匙隔，內(nèi)容如下
import Vue from 'vue'
import Vuex from 'vuex'
import VuexConvert from 'vuex-convert'
const STORE = new VuexConvert({
// Public 為公共的State，請不要刪除
public:{
name: 'Pi'
}
})
Vue.use(Vuex)
export default new Vuex.Store(STORE)
-
在main.js 中引入
import store from './你存放store.js的目錄/store.js' // 日常初始化 new Vue({ store, // <<<--- 此處引入 render: h => h(App) }).$mount('#app')
- 用法
// 如何獲取和設(shè)置(get/set + 首字母大寫)
// 獲取數(shù)據(jù)的方式
this.$store.state.name // 正常
this.$store.getters.getName // 首字母大寫熏版，前面加get
this.$store.getters["user/getName"] // 模塊獲取纷责，前面加模塊名即可
// 修改數(shù)據(jù)的方式
this.$store.dispatch('setName', '要修改的值') // 前面為set + 屬性名(首字母大寫)
- OK ，完事撼短。
總結(jié)：簡化之后再膳，vuex就功能較為單一，數(shù)據(jù)存取曲横。不過本身很容易擴(kuò)展喂柒，可以參考源碼進(jìn)行修改
目前設(shè)計方案是只將vuex作為狀態(tài)機(jī)，只做簡單存取值禾嫉，所以只會存在一個 Mutation和一個Action 灾杰。
當(dāng)然你也可以自己擴(kuò)展，只要將store.js中的actions和mutations換成函數(shù)熙参，然后再適當(dāng)修改源碼即可艳吠。
工欲善其事，必先利其器
高級用法請前往 => 我的Github
[vuex-convert源碼] (https://github.com/Pszz)
