javascript - 使用非vuex状态管理在状态更改后更新模板

我正在制作一个可在您单击+按钮时增加值的应用程序。

我正在关注example from the documentation on Simple State Management。

我已经设置了一个事件处理方法来增加状态值。单击按钮时触发。它更新状态值，但模板不更新。

为了证明这一点，我在我的increment函数中设置了控制台日志，该日志会触发并按预期反映状态值。但是，DOM中的值永远不会改变：



我尝试将模板中的counterValue称为state.counterValue和store.state.counterValue，但是为此我得到了控制台错误。

我究竟做错了什么？

这是我的模板：

<template>
<div>
  <h1>{{store.state.counterValue}}</h1>
  <button v-on:click="increment">+</button>
</div>
</template>

这是我的脚本：

<script>
const store = {
  debug: true,
  state: {
    counterValue: 0
  },
  increment() {
    console.log('updating counterValue...')
    this.state.counterValue = this.state.counterValue + 1
    console.log(this.state.counterValue)
  }
}
export default {
  data() {
    return {
      counterValue: store.state.counterValue
    }
  },
  methods: {
    increment: function() {
      store.increment()
    }
  }
}
</script>

最佳答案

{{store.state.counterValue}}的问题

从docs


  小胡子标记将替换为相应数据对象上的msg属性的值。


您的数据对象（即component / vue-instance）没有名为store的属性。要访问const store，您需要通过组件代理它：

data() {
  return {
    store: store
  }
},

counterValue: store.state.counterValue的问题

这将this.counterValue设置为等于store.state.counterValue的初始值。但是没有代码使它们保持同步。因此，当store.state.counterValue更改时，counterValue将保持不变。



解

通过上述组件通过代理const store。例：

const store = {
  debug: true,
  state: {
    counterValue: 0
  },
  increment() {
    console.log('updating counterValue...')
    this.state.counterValue = this.state.counterValue + 1
    console.log(this.state.counterValue)
  }
}
new Vue({
	el: '#app',
  data() {
    return {
      store: store
    }
  },
  methods: {
    increment: function() {
      this.store.increment();
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.4/vue.js"></script>

<div id="app">
  <h1>{{store.state.counterValue}}</h1>
  <button v-on:click="increment">+</button>
</div>