Question

我的商店中有一个变量，我通过安装的属性（通过操作和突变）对其进行了更改，但是它会从商店中返回到初始值。

（我尝试使用html中的按钮，在那里更改变量的效果很好。）

在我的组件内，您可以找到：

<template>
  <div id="stuff">
    <h1> some random word: {{ hola }}</h1> <-------- problem is here: it prints always ONE instead of THREE)
    <button @click="UPDATE_HOLA('carlos')" text="clickkkBTN"/>
  </div>
</template>

...
methods: {
    ...mapActions(['setHola']),
    ...mapMutations(['UPDATE_HOLA']),
  },
computed: {
    ...mapState(['hola']),
},
watch: {
    hola(newVal){
      console.log('watch' + newVal)
    }
},
mounted() {
    console.log(this.hola); //prints "ONE" (initial value in store)
    this.setHola('TWO');
    console.log(this.hola); //prints "TWO" 
    this.UPDATE_HOLA('THREE');
    console.log(this.hola); //prints "THREE" 
}

问题是：在我的控制台中，我有以下内容：一，二，三，三看，三看。

它返回到商店的初始值ONE（我可以看到三秒钟半，然后又返回到ONE）

我的问题是：为什么初始值会返回？我一定做错了什么。是否有可能使价值三停留？

store / index.js：

export default new Vuex.Store({
  state: {
    hola: 'ONE',
  },
  getters,
  mutations,
  actions,
});

在store / mutation.js中：

  [types.UPDATE_HOLA](state, payload) {
    state.hola = payload;
  },

store / action.js

const setHola = ({ commit }, payload) => {
  commit(types.UPDATE_HOLA, payload);
};

export default {
  setHola
}

Vuex初始化状态将覆盖已安装的更改

0 个答案: