Vuex之理解state的用法例項
阿新 • • 發佈：2019-01-30
，Vuex就是提供一個倉庫，倉庫裡面放了很多物件。其中state就是資料來源存放地，對應於與一般Vue物件裡面的data（後面講到的actions和mutations對應於methods）。
響應書儲存：state裡面存放的資料是響應式的，Vue元件從store中讀取資料，若是store中的資料發生改變，依賴這個資料的元件也會發生更新。（這裡“狀態”=“資料”），也就是是說資料和檢視是同步的。
2.區域性狀態
獲取：在Vue元件中獲取資料，最直接的可以通過計算屬性中獲取；
元件仍然可以儲存區域性狀態：雖然說Vuex的Store倉庫讓我們同一管理資料變得更加方便，但是程式碼一多也會變得冗長，有些元件的資料是自己嚴格自用，我們可以將state
3.mapState
mapState的作用是把全域性的 state 和 getters 對映到當前元件的 computed 計算屬性中，this.$store.state。
使用示例
| 12345678 | import {mapState} from 'vuex'export default {computer :mapState({count: state => state.count,'count' // 對映 this.count 為 store.state.count})} |
看看原始碼
| 1234567891011121314151617181920 | export function mapState (states) {const res = {} //定義一個物件normalizeMap(states).forEach(({ key, val }) => {// normalizeMap（）函式初始化states資料res[key] = function mappedState () {return typeof val === 'function'// 判斷val是否是函式? val.call(this, this.$store.state, this.$store.getters)// 若val是函式，將store的state和getters作為引數，返回值作為mapped State的返回值: this.$store.state[val]}})return res // 返回的是一個函式}//初始化方法 function normalizeMap (map) {return Array.isArray(map) //判斷state是否是陣列? map.map(key => ({ key, val: key }))// 是陣列的話，呼叫map方法，將每一個數組元素轉換成{key,val:key}: Object.keys(map).map(key => ({ key, val: map[key] }))// 否則就是物件，遍歷物件，將每一個val變成val:key} |