vuex筆記

VUEX

概念

• store / module

• state / getters

• mutations / actions

  • payload: commit / dispatch時的參數

  • context: 一個store的新實例，vuex把react中的新state的immutable處理，在框架中就處理了

  • commit

  • dispatch

• plugins

• strict

• 輔助函數： 用於vuex的state與component綁定

  • mapState / mapGetter： compose

  • mapAction / mapMutations: methods

Redux

Dispatch 執行一個 Actions, 經過 一個叫作 Reducer的映射表，計算出新的 State。 Store根據新的State去更新全局組件。

Vuex

經過輔助函數將store的屬性與方法，綁定到component中。componet監聽用戶行爲。commit / dispatch 一個行爲給 mutation / action。 action 內部也是經過commit去執行 mutation。mutation至關於一個操做 state的列表。

// example
import Vue from 'vue';
import Vuex from 'vuex';

const store = new Vuex.Store({
    ...
})

new Vue({
    el: '#app',
    store,
    ...
})

store 與 component

// simpliest store
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

1. 在 componet 中經過 this.$store 訪問 store。
2. store 觸發行爲
    this.$store.commit('mutation name', payload);
    this.$store.dispatch('dispatch name', payload);

mutation 與 action

1. mutation 至關於 reducer。 mutation直接在內部改變 state。 reducer 返回一個新的state。
2. mutation 只執行同步操做。 異步層面的操做放在 actions。 mutation是具體改變狀態的行爲，每次的 mutation 可能被 plugin 捕捉。
3. actions 並不直接對 state進行操做。而是經過發起 mutation 執行操做。所以異步行爲放在 actions。 可經過 Promise 或 async/await 去異步執行。
4. mutation/actions 經過 mapMutations／mapActions 與具體的組件進行綁定。

// mutationExap(state, payload) {}
// actionExamp(context, payload) {}

// example
const store = new Vuex.Store({
    state: {
        count: 0,
        name: 'default name'
    },
    mutations: {
        exampleMutations1(state) {
            // do something
            state.count++
        },
        exampleMutations1(state, name) {
            
        }
    },
    actions：{
        exampleActions1(context) {
            context.commit('exampleMutations1');
        },
        exampleActions1(context) {
            // 'name' is payload
            context.commit('exampleMutations1', name); 
        }
    }
});

基本規則

Vuex 並不限制你的代碼結構。可是，它規定了一些須要遵照的規則：

1. 應用層級的狀態應該集中到單個 store 對象中。

2. 提交 mutation 是更改狀態的惟一方法，而且這個過程是同步的。

3. 異步邏輯都應該封裝到 action 裏面。

state [type: Object]

const    store = new Vuex.Store({
    state: {
        count: 1
    }
    mutations: ...
})

modules

const moduleA = {
    state,
    mutations,
    actions, // 可無
    getters, // 可無
    modules  // 可無, 可嵌套
}

const moduleB = {
    state,
    mutations,
    actions,
    getters
    modules
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
store.state.a; // -> moduleA 的狀態
store.state.a; // -> moduleB 的狀態

getter

const store = new Vuex.Store({
    state: { ... },
    getter: {
        exampleGetter(state, getters) {
            return 
        }
    }
})

const module = {
    state: ...
    getter: {
        exampleGetter(state, getters, rootState)
    }
}

mutations [type: string]: Function

// like Reducer
const store = new Vuex.Store({
  ...
  mutations: {
    increment (state, playload) {
      // 變動狀態
      state.count++
    }
  }
})

Tips

1. mutation 必須是同步函數

2. devtools 不知道何時回調函數實際上被調用 —— 實質上任何在回調函數中進行的的狀態的改變都是不可追蹤的

actions

Action 函數接受一個與 store 實例具備相同方法和屬性的 context 對象?

支持異步：

1. promise

2. async / await

示例代碼：

function (context) {
}

context = { state, rootState, getters, commit, dispatch}

插件 plugins

https://vuex.vuejs.org/zh-cn/...

store = new vuex.Store({
    ...
    plugins: ['pluginA', 'pluginB']
    // plugins: process.env.NODE_ENV !== 'production' ? 
        [myPluginWithSnapshot] : []
})

內置的 Plugins 插件:

• logger

模塊動態註冊 / 按需加載

動態加載
store.registerModule('myModule', {
  // ...
})
store.state.myModule; // myModule的狀態 

store.unregisterModule(myModule); //卸載模塊
// 不能使用此方法( unregisterModule )卸載靜態模塊（在建立 store 時聲明的模塊）

須要 vue 插件
例如，vuex-router-sync 插件能夠集成 vue-router 與 vuex，管理動態模塊的路由狀態。

嚴格模式 / 生產環境 ／ 開發環境

詳見：https://vuex.vuejs.org/zh-cn/...

嚴格模式

const store = new Vuex.Store({
  // ...
  strict: true
})

環境

// 嚴格模式會對狀態進行深度檢測，影響性能
// 所以，生產環境 禁用
const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})

測試

// TODO
https://vuex.vuejs.org/zh-cn/...

Api

https://vuex.vuejs.org/zh-cn/...