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

Question

我正在制作一个应用，当您点击+按钮时会增加一个值。

我正在关注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>

Answer 1

{{store.state.counterValue}}

的问题

来自docs

  

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

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

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

counterValue: store.state.counterValue

的问题

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

解决方案

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

＆＃13;

＆＃13;

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();
    }
  }
})

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;