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