第七課時: 狀態管理, Vuex進階

1.插件
由於vuex是存在內存中的，因此刷新頁面的時候其中的值就會初始化。爲了刷新時不讓其改變，能夠開發一個插件，把state狀態都存在本地中。

saveInLocal.js:

export default store => {
      if (localStorage.state) store.replaceState(JSON.parse(localStorage.state))
      store.subscribe((mutation, state) => {
        localStorage.state = JSON.stringify(state)
      })
    }

在store文件夾中的index.js 添加代碼:

import saveInLocal from './plugin/saveInLocal'
Vue.use(Vuex)

export default new Vuex.Store({
    //...
    plugins: [ saveInLocal ]
})

2.嚴格模式
開啓嚴格模式，僅需在建立 store 的時候傳入 strict: true：

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

在嚴格模式下，不管什麼時候發生了狀態變動且不是由 mutation 函數引發的，將會拋出錯誤。這能保證全部的狀態變動都能被調試工具跟蹤到。

3.vuex + 雙向綁定
必須認可，這樣作比簡單地使用「v-model + 局部狀態」要囉嗦得多，而且也損失了一些 v-model 中頗有用的特性。另外一個方法是使用帶有 setter 的雙向綁定計算屬性：

<input v-model="message">

// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}