vuejs 2如何从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？

Answer 1

，则不应使用组件的观察家们听的状态变化。我建议你使用getters函数，然后将它们映射到你的组件中。

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

正如上面提到的是不能直接在店内

但在一些非常罕见的情况下，它可能是有用的人来观看变化好主意，所以我会离开这个答案。对于其他情况，请参阅@ gabriel-robert回答

您可以通过state.$watch执行此操作。在添加这是你created（或其中u需要用它来执行）的组件的方法

this.$store.watch(
    function (state) { 
     return state.my_state; 
    }, 
    function() { 
     //do something on data change 
    }, 
    { 
     deep: true //add this if u need to watch object properties change etc. 
    } 
); 

更多细节：https://vuex.vuejs.org/en/api.html#vuexstore-instance-methods

Answer 3

您还可以使用mapState在VUE组件直接从存储中获取的状态。

在您的组件：

computed: mapState([ 
    'my_state' 
]) 

哪里my_state是从商店的变量。

Answer 4

比方说，例如，您在每次添加或筐取出一个水果的时间水果的篮子， 和，你 要（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, yaay!`) 
    } 
    } 
} 
</script> 

请注意，在watch对象的函数的名称，必须在computed对象的函数的名称相匹配。在上面的例子中，名称是count。

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

篮子店看起来是这样的：

水果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 
    } 
    } 
    // Obvously you would need some mutations and actions, 
    // but to make example cleaner I'll skip this part. 
}) 

export default basket 

您可以在以下资源了解更多：

• Computed properties and watchers
• API docs: computed
• API docs: watch

Answer 5

我认为提问者想用Vuex手表。

this.$store.watch(
     (state)=>{ 
     return this.$store.getters.your_getter 
     }, 
     (val)=>{ 
     //something changed do something 

     }, 
     { 
     deep:true 
     } 
    ); 

Answer 6

加百列说，观察商店变化的最好方法是使用mapGetters。 但是有些情况下，您无法通过mapGetters你想用参数来获取从商店的东西：你不能使用mapGetters这种情况下

getters: { 
    getTodoById: (state, getters) => (id) => { 
    return state.todos.find(todo => todo.id === id) 
    } 
} 

。您可以尝试做这样的事情，而不是：

computed: { 
    todoById() { 
     return this.$store.getters.getTodoById(this.id) 
    } 
} 

但不幸的是todoByIdwill be updated only if this.id is changed

如果你想你在这种情况下使用this.$store.watchsolution provided by Gong组件更新。或者有意识地处理您的组件并在需要更新todoById时更新this.id。

Answer 7

这是所有的人都无法解决他们的问题与吸气剂，实际上真的需要一个观察者，例如，与非vue第三方的内容交谈（请参阅Vue Watchers何时使用观察者）。

Vue组件的观察者和计算值都可用于计算值。因此，它与vuex没有什么不同：

import { mapState } from 'vuex'; 

export default { 
    computed: { 
     ...mapState(['somestate']), 
     someComputedLocalState() { 
      // is triggered whenever the store state changes 
      return this.somestate + ' works too'; 
     } 
    }, 
    watch: { 
     somestate(val, oldVal) { 
      // is triggered whenever the store state changes 
      console.log('do stuff', val, oldVal); 
     } 
    } 
} 

，如果是只有结合本地和全球的状态下，mapState's doc还提供了一个例子：

computed: { 
    ...mapState({ 
     // to access local state with `this`, a normal function must be used 
     countPlusLocalState (state) { 
      return state.count + this.localCount 
     } 
    } 
})