Vue JS：如何更新数据中的值 return

Question

我正在使用 vue-codemirror package 在网站上显示 css 代码。问题是我不明白如何更新我用 vuex

获得的状态

  <div>
    <codemirror v-model="code" />
    <button @click="change">click</button>
    {{ $store.state.background }}
  </div>

  methods: {
    change() {
      Vue.set(this.$store.state, "background", "#242424");
    },
  },

  data() {
    return {
      code: dedent`
          /* Some example CSS */
          body {
            margin: ${this.$store.state.background};
            padding: 3em 6em;
          }
        `,
    };
  },

Vuex

export default new Vuex.Store({
  state: {
    background: "#000",
  },
});

我认为问题出在反应性上，因此决定在单击 click 按钮时使用 Vue.set，{{ $store.state.background }} 的值发生变化，但 {{ $store.state.background }} 中的代码=16=] return 不变

你也可以看到这个example in codesandbox

Answer 1

喜欢@vanblart 评论您可以创建计算属性，而不是数据：

computed: {
  code() { return dedent(`
      /* Some example CSS */
      body {
        margin: ${this.$store.state.background};
        padding: 3em 6em;
      }
  `)
}

并且在 Vuex 中你可以创建 action/mutation 来设置值：

mutations: {
  addBkg(state, val) {
    state.background = val
  },
},
actions: {
  setBkg({ commit }, data) {
    commit("addBkg", data);
  },
},

并在方法中调度该操作：

change() {
  this.$store.dispatch("setBkg", "#242424");
},

Vue JS：如何更新数据中的值 return

Vue JS: How to update the value that is inside data return

javascript

vue.js

vuex

vuejs2