vuex的應用和解決的實際問題

這是vuex的語法結構內容

簡單的理解vuex： new Vue({ // state
 data () { return { count: 0 } }, // view
 template: ` <div>{{ count }}</div>
 `, // actions
 methods: { increment () { this.count++ } } }) state，驅動應用的數據源；（單向數據流） view，以聲明方式將 state 映射到視圖；（靜態顯示出來的數據源） actions，響應在 view 上的用戶輸入致使的狀態變化 （數據源變化追蹤） --------------------------------------------------------------------------------- vuxe解決了: 1.多個組件共享狀態時，單向數據流的簡潔性很容易被破壞： 2.多個視圖依賴於同一狀態。 3.來自不一樣視圖的行爲須要變動同一狀態。 --------------------------------------------------------------------------------- vuex使用場景： 中大型單頁應用，考慮如何更好地在組件外部管理狀態，簡單應用不建議使用。 --------------------------------------------------------------------------------- Vuex 的狀態存儲是響應式的 state: 從 store 實例中讀取狀態最簡單的方法就是在計算屬性中返回某個狀態 如： view層： template: ` <div>{{ count }}</div>
 ` computed: { count () { return store.state.count } } （這種方式頻繁操做的話繁瑣因而有了更好的解決方式，由於在每一個須要使用 state 的組件中都須要頻繁地導入） Vuex 經過 store 選項，提供了一種機制將狀態從根組件「注入」到每個子組件中（需調用 Vue.use(Vuex)） 經過在根實例中註冊 store 選項，該 store 實例會注入到根組件下的全部子組件中，且子組件能經過 this.$store 訪問到 computed: { count () { return this.$store.state.count } } （這種方式比較好） ----------------------------------------------------------------------------------- 當一個組件須要獲取多個狀態時候，將這些狀態都聲明爲計算屬性會有些重複和冗餘。此時能夠用使用 mapState 輔助函數幫助咱們生成計算屬性（少寫好多代碼的） import { mapState } from 'vuex' export default { computed: mapState({ // ES6箭頭函數可以使代碼更簡練
    count: state => state.count, countAlias: 'count',  //傳字符串參數'count'等同於`state => state.count`
 countPlusLocalState (state) { return state.count + this.localCount // 爲了可以使用`this`獲取局部狀態，必須使用常規函數
 } }) } 當映射的計算屬性的名稱與 state 的子節點名稱相同時，咱們也能夠給 mapState 傳一個字符串數組。 computed: mapState([ 'count'//映射 this.count爲store.state.count
]) 對象展開運算符（簡單的mapState能夠傳數組和對象對象時候前面的屬性是自定義的別名） computed: { localComputed () { /* ... */ }, ...mapState({ // 使用對象展開運算符將此對象混入到外部對象中
 }) } ----------------------------------------------------------------------------------- 同state，vuex裏面的getter也是如此： computed: { doneTodosCount () { return this.$store.state.todos.filter(todo => todo.done).length //對數據源進行基本的操做
 } } （最初始是若是有多個組件須要用到此屬性，咱們要麼複製這個函數，或者抽取到一個共享函數而後在多處導入它） 進而： Vuex容許咱們在store中定義「getter」能夠認爲是 store 的計算屬性）。就像計算屬性同樣，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變纔會被從新計算。 mapGetters 輔助函數 mapGetters 輔助函數僅僅是將 store 中的 getter 映射到局部計算屬性： import { mapGetters } from 'vuex' export default { computed: { ...mapGetters([ //使用對象展開運算符將getter混入computed對象中
      'doneTodosCount',（實際就是導出一個方法，能夠獲取裏面的東西和一些操做） 'anotherGetter', // ...
 ]) } } 若是你想將一個getter屬性另取一個名字，使用對象形式： mapGetters({ doneCount: 'doneTodosCount' //映射`this.doneCount`爲`store.getters.doneTodosCount`
}) ----------------------------------------------------------------------------------- 更改 Vuex 的 store 中的狀態的惟一方法是提交 mutation： Vuex中的mutation很是相似於事件：每一個mutation都有一個字符串的 事件類型 (type)和一個 回調函數 (handler)。這個回調函數就是咱們實際進行狀態更改的地方，而且它會接受 state 做爲第一個參數： const store = new Vuex.Store({ state: { count: 1 }, mutations: { increment (state) { // 變動狀態
      state.count++ } } }) （最初始是這樣的，可是注意必定是同步操做，異步是不行的） 你不能直接調用一個 mutation的回調，須要store.commit('increment') 向store.commit傳入額外的參數，叫作mutation的 載荷（payload） mutations: { increment (state, n) { state.count += n } } store.commit('increment', 10) 在大多數狀況下，載荷應該是一個對象，這樣能夠包含多個字段而且記錄的 mutation 會更易讀： mutations: { increment (state, payload) { state.count += payload.amount } } store.commit('increment', { amount: 10 }) （傳進去的是什麼，調用的是時候也是傳對應的值就行了） 提交的另一種方式：對象風格的提交方式（此時回調是不變的） store.commit({ type: 'increment', amount: 10 }) Vuex 中的 mutation 也須要與使用 Vue 同樣遵照一些注意事項： 1.最好提早在你的 store 中初始化好全部所需屬性。 2.當須要在對象上添加新屬性時，你應該使用 Vue.set(obj, 'newProp', 123), 或者 以新對象替換老對象：state.obj = { ...state.obj, newProp: 123 } 通常會獨立開來（使用mutation-types.js存放mutation常量）如： //mutation-types.js
export const SOME_MUTATION = 'SOME_MUTATION'

// store.js
import Vuex from 'vuex' import { SOME_MUTATION } from './mutation-types' const store = new Vuex.Store({ state: { ... }, mutations: { // 咱們可使用 ES2015 風格的計算屬性命名功能來使用一個常量做爲函數名
 [SOME_MUTATION] (state) { // mutate state
 } } }) 你能夠在組件中使用this.$store.commit('xxx')提交 mutation或者使用 mapMutations 輔助函數（須要在根節點注入 store）： import { mapMutations } from 'vuex' export default { methods: { ...mapMutations([ 'increment', // 將 `this.increment()` 映射爲 `this.$store.commit('increment')`
      // `mapMutations` 也支持載荷：
      'incrementBy' // 將 `this.incrementBy(amount)` 映射爲 `this.$store.commit('incrementBy', amount)`
 ]), ...mapMutations({ add: 'increment' // 將 `this.add()` 映射爲 `this.$store.commit('increment')`
 }) } } ----------------------------------------------------------------------------------- Action 相似於 mutation，不一樣在於： 1.Action 提交的是 mutation，而不是直接變動狀態。 2.Action 能夠包含任意異步操做。 簡單的： const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment') } } }) Action 函數接受一個與 store 實例具備相同方法和屬性的context（函數上下文）對象，所以你能夠調用 context.commit 提交一個 mutation，或者經過 context.state 和 context.getters 來獲取 state 和 getters。 context對象並非store實例自己 提交： actions: { increment ({ commit }) { commit('increment') } } 分發（觸發）Action： store.dispatch('increment') 異步操做： actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) } } Actions 支持一樣的載荷方式和對象方式進行分發： //以載荷形式分發
store.dispatch('incrementAsync', { amount: 10 }) //以對象形式分發
store.dispatch({ type: 'incrementAsync', amount: 10 }) 你在組件中使用 this.$store.dispatch('xxx') 分發 action，或者使用mapActions輔助函數 import { mapActions } from 'vuex' export default { methods: { ...mapActions([ 'increment', //將`this.increment()` 映射爲 `this.$store.dispatch('increment')`
      //`mapActions`也支持載荷：
      'incrementBy' //將`this.incrementBy(amount)` 映射爲 `this.$store.dispatch('incrementBy', amount)`
 ]), ...mapActions({ add: 'increment' //將`this.add()`映射爲`this.$store.dispatch('increment')`
 }) } } 組合action： 實際項目沒用過async/await大概理解就是等待執行完上一個方法後（結束後）再走下一步（下一個方法）
// 假設 getData() 和 getOtherData() 返回的是 Promise
actions: { async actionA ({ commit }) { commit('gotData', await getData()) }, async actionB ({ dispatch, commit }) { await dispatch('actionA') // 等待 actionA 完成
    commit('gotOtherData', await getOtherData()) } } ----------------------------------------------------------------------------------- Module（Vuex 容許咱們將 store 分割成模塊（module）解決store 對象臃腫） const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } }) store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態
（簡單認爲符合上面的組織形式的成爲單獨模塊）（項目不足夠大不建議使用）