Question

我有兴趣制作一个自定义复选框组件，其中包含许多div和一些内容。

我有一个看起来像这样的商店：

var store = Vuex.Store({
  state: {
    lights: true,
    sound: false
  }
});

有什么办法可以创建一个可以接受其中一个属性（lights或sound）并操纵它们的自定义组件？

我现在所有事情都陷入困境。我创建了一个模板：

<div id="app">
  <div class="container">
    <my-switch :name="'lights'"></my-switch>
    <my-switch :name="'sound'"></my-switch>
  </div>
</div>

接下来我正在使用this as an example，并尝试将每个复选框绑定到商店的一个属性：

Vue.use(Vuex);

var store = Vuex.Store({
  state: {
    lights: true,
    sound: false
  },
  mutations: {
    updateMessage(state, args) {
      state[args.name] = args.value;
    }
  }
});

Vue.component("my-switch", {
  props: ["name"],
  template: '<div>{{ name }} <input type="checkbox" v-model="checked"></div>',
  computed: {
    checked: {
      get() {
        return this.$store.state[this.name];
      },
      set(value) {
        this.$store.commit("updateMessage", { name: this.name, value: value });
      }
    }
  }
});

var v = new Vue({
  el: "#app",
  store: store
});

我在这里打破了演示： https://codepen.io/EightArmsHQ/pen/dVXeNL?editors=0010

问题是我收到以下错误：

TypeError：无法读取属性＆＃39; state＆＃39;未定义的

Answer 1

您需要通过new Vuex.Store({...})实例化Vuex商店（我希望您的代码会抛出错误，但显然不会。）

另外，您不需要Vue.use(Vuex)行。

Here's a working Codepen.

Vuex：动态绑定到状态的属性

1 个答案: