Vuex 通過 store 選項，提供了一種機制將狀態從根組件“注入”到每一個子組件中（需呼叫 Vue.use(Vuex)）：通過在根實體中注冊 store 選項，該 store 實體會注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到
computed: {
f1() {
return this.$store.state.xxxx
}
},
watch: {
f1(curVal, oldVal) {
//這里的curVal就是需要監聽的值
}
}
computed 里一般寫個函式，這個函式里一定是return一個結果， 這里你可以直接用f1作為本組件監聽$store.state.xxxx, 也可以在本組件里宣告一個變數然后再通過watch監聽，將watch中的curVal賦值給該變數從而達到使用的目的，
當需要從vuex中獲取的變數特別多是,可以使用mapState代替
當一個組件需要獲取多個狀態時候，將這些狀態都宣告為計算屬性會有些重復和冗余，為了解決這個問題，我們可以使用 mapState 輔助函式幫助我們生成計算屬性，讓你少按幾次鍵：
// 在單獨構建的版本中輔助函式為 Vuex.mapState
import { mapState } from 'vuex'
export default {
// ...
computed: mapState({
// 箭頭函式可使代碼更簡練
count: state => state.count,
// 傳字串引數 'count' 等同于 `state => state.count`
countAlias: 'count',
// 為了能夠使用 `this` 獲取區域狀態，必須使用常規函式
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字串陣列，
computed: mapState([
// 映射 this.count 為 store.state.count
'count'
])
物件展開運算子
mapState 函式回傳的是一個物件，我們如何將它與區域計算屬性混合使用呢？通常，我們需要使用一個工具函式將多個物件合并為一個，以使我們可以將最終物件傳給 computed 屬性，但是自從有了物件展開運算子（現處于 ECMAScript 提案 stage-4 階段），我們可以極大地簡化寫法：
computed: {
localComputed () { /* ... */ },
// 使用物件展開運算子將此物件混入到外部物件中
...mapState({
// ...
})
}
站在巨人的肩膀上摘蘋果:
鏈接：https://www.jianshu.com/p/b5365c05882b
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/150733.html
標籤：JavaScript
上一篇：vue中使用axios