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

新手上路,请多包涵

我正在一起使用 vuexvuejs 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 许可协议

阅读 1.1k
2 个回答

你不应该使用组件的观察者来监听状态变化。我建议您使用 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 许可协议

例如,假设您有一篮子水果,每次从篮子中添加或移除水果时,您想要 (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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题