Vuex 疑问+解答

疑问

1. state 声明为computed，只有get没有set会报error？
   答：
   不可以直接将input标签的v-model设为state，如下例子在严格模式下是会报错的。因为用户在输入的时候，在改变v-model的同时，也会直接改变state（而非通过mutation）

<input v-model="$store.state.resourceEditMod.stage">...

也不可以按如下方式设置，因为computed计算属性不能直接赋给v-model，否则会报错。原因是：v-model绑定computed计算属性时，没有办法双向响应（也就是，v-model改变时，computed计算属性不会相对应地改变，这不符合v-model的设定）

<input v-model="stage">...

computed: {
      stage(){
        return this.$store.state.resourceEditMod.stage
      }
    }

所以有两种方法解决这个问题：
方法一

<input :value="stage" @input="updateStage">

computed: {
  stage(){
        return this.$store.state.resourceEditMod.stage
   }
},
methods: {
  updateStage (e) {
    this.$store.commit('updateStage', e.target.value)
  }
}

方法二

<input v-model="stage">...

computed: {
  stage: {
    get () {
      return this.$store.state.resourceEditMod.stage
    },
    set (value) {
      this.$store.commit('updateStage', value)
    }
  }
}

2. 不同Modules中的Mutations可不可以重名？
   答：
   可以。
   官方说明：默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

   如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。例如：

const store = new Vuex.Store({
  modules: {
    account: {
      namespaced: true,

      // 模块内容（module assets）
      state: { ... }, // 模块内的状态已经是嵌套的了，使用 `namespaced` 属性不会对其产生影响
      getters: {
        isAdmin () { ... } // -> getters['account/isAdmin']
      },
      actions: {
        login () { ... } // -> dispatch('account/login')
      },
      mutations: {
        login () { ... } // -> commit('account/login')
      }
    },
    account2: {...},
    account3: {...}
  }
}

3. 如果全局和module内有名称相同的mutation，会发生什么情况？
   答：我将从以下这几种情况进行测试，分别是：
   1.module namespaced:true, commit 带module名称为路径的mutation
   2.module namespaced:true, commit 无module名称为路径的mutation
   3.module 没设置 namespaced:true, commit 带module名称为路径的mutation
   4.module 没设置 namespaced:true, commit 无module名称为路径的mutation

   1.module namespaced:true, commit 带module名称为路径的mutation

const store = new Vuex.Store({
  state:{
    count: 0
  },
  mutations: {
    add(state){
      state.count++
    }
  },
  modules: {
    test:{
      namespaced: true,
      state:{
        count:1
      },
      mutations: {
        add(state){
          state.count++
        }
      }
    }
  }
}

console.log('this.store.state.count:'+ this.$store.state.count)
console.log('this.store.state.test.count:'+ this.$store.state.test.count)
this.$store.commit('test/add')  // 有module路径名
console.log('this.store.state.count:'+ this.$store.state.count)
console.log('this.store.state.test.count:'+ this.$store.state.test.count)

打印出来如下，module test中的mutation add被调用

2.module namespaced:true, commit 无module名称为路径的mutation

console.log('this.store.state.count:'+ this.$store.state.count)
console.log('this.store.state.test.count:'+ this.$store.state.test.count)
this.$store.commit('add') // 无module路径名
console.log('this.store.state.count:'+ this.$store.state.count)
console.log('this.store.state.test.count:'+ this.$store.state.test.count)

打印出来如下，store全局中的mutation add被调用

3.module 没设置 namespaced:true, commit 带module名称为路径的mutation

const store = new Vuex.Store({
  state:{
    count: 0
  },
  mutations: {
    add(state){
      state.count++
    }
  },
  modules: {
    test:{
      state:{
        count:1
      },
      mutations: {
        add(state){
          state.count++
        }
      }
    }
  }
}

console.log('this.store.state.count:'+ this.$store.state.count)
console.log('this.store.state.test.count:'+ this.$store.state.test.count)
this.$store.commit('test/add')  // 有module路径名
console.log('this.store.state.count:'+ this.$store.state.count)
console.log('this.store.state.test.count:'+ this.$store.state.test.count)

由于没有加namespaced: true, module test没有带命名空间，所以commit失败

4.module 没设置 namespaced:true, commit 无module名称为路径的mutation

console.log('this.store.state.count:'+ this.$store.state.count)
console.log('this.store.state.test.count:'+ this.$store.state.test.count)
this.$store.commit('add')  // 无module路径名
console.log('this.store.state.count:'+ this.$store.state.count)
console.log('this.store.state.test.count:'+ this.$store.state.test.count)

store全局的mutation add 和 module test中的mutation add，都被调用。这种情况在工程中是不合逻辑的，即使你只想调其中一个mutation，由于有重复命名的其他全局mutation存在，也会被调用。所以，要么全局的mutations名称不能有重复，要么在namespaced: true的不同modules中才能定义名称相同的mutations。