Vuex 严格模式 & 表单处理 & 热重载

严格模式

在该模式下，无论何时发生了状态变更且不是由 mutation 函数引起的，将会抛出错误。
这能保证所有的状态变更都能被调试工具跟踪到。
开启严格模式，仅需在创建 store 的时候传入 strict: true：

const store = new Vuex.Store({
    // 严格模式会深度监测状态树来检测不合规的状态变更，确保在发布环境下关闭严格模式
    strict: process.env.NODE_ENV !== 'production'
})

表单处理

当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会比较棘手：

<input v-model="obj.message">

假设这里的 obj 是在计算属性中返回的一个属于 Vuex store 的对象，
在用户输入时，v-model 会试图直接修改 obj.message
在严格模式中，由于这个修改不是在 mutation 函数中执行的, 这里会抛出一个错误

• 用 “Vuex 的思维” 去解决这个问题的方法是：

  1. 给 <input> 中绑定 value
  2. 然后侦听 input 或者 change 事件，在事件回调中调用 action:

<input :value="message" @input="updateMessage">

// ...
computed: {
    ...mapState({
        message: state => state.obj.message
    })
},
methods: {
    updateMessage (e) {
        this.$store.commit('updateMessage', e.target.value)
    }
}

mutations: {
    updateMessage (state, message) {
        state.obj.message = message
    }
}

• 双向绑定的计算属性：

<input v-model="message">

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

热重载

使用 webpack 的 Hot Module Replacement API，Vuex 支持在开发过程中热重载 mutation、module、action 和 getter。你也可以在 Browserify 中使用 browserify-hmr 插件。

对于 mutation 和模块，你需要使用 store.hotUpdate() 方法：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import moduleA from './modules/a'

Vue.use(Vuex)

const state = { ... }

const store = new Vuex.Store({
    state,
    mutations,
    modules: {
        a: moduleA
    }
})

if (module.hot) {
    // 使 action 和 mutation 成为可热重载模块
    module.hot.accept(['./mutations', './modules/a'], () => {
        // 获取更新后的模块
        // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
        const newMutations = require('./mutations').default
        const newModuleA = require('./modules/a').default
        // 加载新模块
        store.hotUpdate({
            mutations: newMutations,
            modules: {
                a: newModuleA
            }
        })
    })
}

参考热重载示例 counter-hot。