如何从vuex查看存储值？

Question

我在一起使用vuex和vuejs 2。

我是新来的vuex，我想看一个store变量的变化。

我想在我的vue组件中添加watch功能

这就是我到目前为止所做的：

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

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

我想知道my_状态是否有任何更改

如何在vuejs组件中查看存储.my_state？




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

Answer 2

简单到：

watch: {
  '$store.state.drawer': function() {
    console.log(this.$store.state.drawer)
  }
}

Answer 3

例如，假设你有一个水果篮，每次你从篮子中添加或删除一个水果，你想（1）显示关于水果计数的信息，但你也想（2）被通知水果的计数以某种奇特的方式...

果数成分

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

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

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

fruit-basket.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文档：观察