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

I am using the vue-codemirror package to display css code on a website. The problem is that I don't understand how to update the state I get with 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",
  },
});

I thought that the problem was reactivity and decided to use Vue.set when clicking on the click button, the value of {{ $store.state.background }} changes, but the code that is inside the data return does not change

You can also see this example in codesandbox

CodePudding user response：

Like @vanblart commented You can create computed property, instead data:

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

and in Vuex you can create action/mutation for setting values:

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

and in methos dispatch that action:

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