如何查看来自 vuex 的存储值？

Question

我正在一起使用 vuex 和 vuejs 2 。

我是 vuex 的新手，我想观察 store 变量的变化。

我想在我的 watch 中添加 vue component 功能

这是我到目前为止所拥有的：

import Vue from 'vue';
import {
  MY_STATE,
} from './../../mutation-types';

export default {
  [MY_STATE](state, token) {
    state.my_state = token;
  },
};

我想知道 my_state 是否有任何变化

如何在我的 vuejs 组件中观看 store.my_state ？

原文由 raffffffff 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你不应该使用组件的观察者来监听状态变化。我建议您使用 getter 函数，然后将它们映射到您的组件中。

 import { mapGetters } from 'vuex'

 export default {
 computed: {
 ...mapGetters({
 myState: 'getMyState'
 })
 }
 }

在您的商店中：

 const getters = {
 getMyState: state => state.my_state
 }

您应该能够通过在组件中使用 this.myState 来收听对商店所做的任何更改。

https://vuex.vuejs.org/en/getters.html#the-mapgetters-helper

原文由 Gabriel Robert 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

例如，假设您有一篮子水果，每次从篮子中添加或移除水果时，您想要 (1) 显示有关水果数量的信息， 但 您还 (2) 想要收到通知以某种奇特的方式数水果…

水果计数组件.vue

 <template>
  <!-- We meet our first objective (1) by simply -->
  <!-- binding to the count property. -->
  <p>Fruits: {{ count }}</p>
</template>

<script>
import basket from '../resources/fruit-basket'

export default () {
  computed: {
    count () {
      return basket.state.fruits.length
      // Or return basket.getters.fruitsCount
      // (depends on your design decisions).
    }
  },
  watch: {
    count (newCount, oldCount) {
      // Our fancy notification (2).
      console.log(`We have ${newCount} fruits now, yay!`)
    }
  }
}
</script>

请注意， watch computed 中的函数名称匹配。在上面的示例中，名称是 count 。

监视属性的新旧值将作为参数传递到监视回调（计数函数）中。

篮子商店可能看起来像这样：

水果篮.js

 import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const basket = new Vuex.Store({
  state: {
    fruits: []
  },
  getters: {
    fruitsCount (state) {
      return state.fruits.length
    }
  }
  // Obviously you would need some mutations and actions,
  // but to make example cleaner I'll skip this part.
})

export default basket

您可以在以下资源中阅读更多内容：

• 计算属性和观察者
• API文档：计算
• API 文档：观看

原文由 Anastazy 发布，翻译遵循 CC BY-SA 4.0 许可协议