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

Question

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

I think what you really want to do is make your code a computed value - that way when the state updates so will your value :) — vanblart
– vanblart, Commented Jan 28, 2022 at 20:54

Nikola Pavicevic · Accepted Answer · 2022-01-28 23:51:05Z

2

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");
},

answered Jan 28, 2022 at 23:51

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related