Vuex数据更新,但是视图不更新?

作者: Lynan 分类: Vue.js 发布时间: 2018-04-08 15:10

如下,我们在data中引用vuex中的数据,然后在视图中显示

<template>
  <div id="app">
    <button @click="clickme">点击我</button>
    <span>{{countnumber}}</span>
  </div>
</template> 

<script>
export default {
  name: 'app',
  data() {
    return {
      countnumber: this.$store.state.count,
    }
  },
  methods: {
    clickme() {
      this.$store.commit("increment");
    }
  }
}
</script>
<style>
</style>  

但是当我们操作mutations更新vuex时,视图上的数据不更新,这是为什么? 我个人的思考:data在这个组件被创建时从vuex中取得这个数据,在视图上显示出来,然后当我们操作更新vuex时,却没有操作使data重新获取vuex中的数据,所以导致视图只显示第一次从vuex中获得的数据。

解决办法:

<template>
  <button @click="clickme">点击我</button>
  <span>{{$store.state.count}}</span>
</template>

发表评论

电子邮件地址不会被公开。 必填项已用*标注