Estoy usando el paquete vue-codemirror para mostrar el código css en un sitio web. El problema es que no entiendo como actualizar el estado que me sale con 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", }, }); Pensé que el problema era la reactividad y decidí usar Vue.set al hacer clic en el botón de click , el valor de {{ $store.state.background }} cambia, pero el código que está dentro de la return data no cambia.
También puedes ver este ejemplo en codesandbox
Como comentó @vanblart, puede crear una propiedad calculada, en lugar de datos:
computed: { code() { return dedent(` /* Some example CSS */ body { margin: ${this.$store.state.background}; padding: 3em 6em; } `) }y en Vuex puede crear acción/mutación para establecer valores:
mutations: { addBkg(state, val) { state.background = val }, }, actions: { setBkg({ commit }, data) { commit("addBkg", data); }, },y en methos despachar esa acción:
change() { this.$store.dispatch("setBkg", "#242424"); },