>[success] # state -- 擴展 ~~~ 1.上面的參數使用理解章節簡單的示范了一下使用'state' 中的數據在組件中如何獲 取值，是通過vue 實例上掛載'$store'對應的'state' 進行取值,關于為什么可以直接在vue實例獲取 '$store'這部分可以參考'Vue -- 簡單弄懂VueRouter過程'章節對'$router掛載vue實例的形式做參考' 還有一點考慮到計算屬性的緩存特性才將'通過$store獲取的state值放到了計算屬性上' 2.官方文檔中還給了更簡單的使用方法，出發點往往'state'可能是大量的數據，每一次都需要 重復的去在計算屬性定義其實往往這些操作代碼都會去做統一跟方便的處理，同樣官方 提供的'mapState 輔助函數'，來減少這種'this.$store.state.存值的名稱'重復性質的操作 ~~~ >[info] ## mapState 輔助函數 ~~~ 1.Vuex 給我們提供了輔助函數，使用的時候只需要引入輔助函數即可: import { mapState } from 'vuex' 2.上面的引入方式用了es6的結構賦值，相當于下面的寫法: import vuex from 'vuex' const mapState = vuex.mapState ~~~ >[danger] ##### 官方給的幾種寫法 ~~~ 1.官方的第一種寫法，就是我們案中的一種縮寫形式 2.第二種是官方第一種的縮寫形式 3.第三種為了方便獲取this 進行組合形式的數據返回 ~~~ ~~~ export default { // ... computed: mapState({ // 箭頭函數可使代碼更簡練 count: state => state.count, // 傳字符串參數 'count' 等同于 `state => state.count` countAlias: 'count', // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數 countPlusLocalState (state) { return state.count + this.localCount } }) } ~~~ ~~~ 4.第四種是一二種的縮寫用，'使用數組'中直接包含'state' 中要使用的值 ~~~ ~~~ computed: mapState([ // 映射 this.count 為 store.state.count 'count' ]) ~~~ >[danger] ##### 項目中正確使用方式 ~~~ 1.首先計算屬性不可能只有vuex 使用定義，可以通過解構的方式將這些vuex 通過輔助函數注入進去 ...mapState(['對應vuexstate中值名字']) ...mapState({'要在頁面中使用的名稱': 對應取Vuex中的state方法}) ~~~ * 用數組表達 ~~~ <template> <div> <p>{{appName}}</p> </div> </template> <script> import { mapState } from 'vuex' export default { name: "store", data(){ return{} }, methods:{}, computed:{ ...mapState([ 'appName', ]), // 在計算屬性中 創建一個方法用來接受 vuex 中的stat // appName(){ // return this.$store.state.appName; // }, // userName(){ // return this.$store.state.user.userName; // } } } </script> <style scoped> </style> ~~~ * 對象的形式 ~~~ <template> <div> <p>{{appName}}</p> <p>{{userName}}</p> </div> </template> <script> import { mapState } from 'vuex' import state from "../store/state"; export default { name: "store", data(){ return{} }, methods:{}, computed:{ ...mapState({ appName:state => state.appName, userName: state => state.user.userName, // 使用module 中的state值 }), // 在計算屬性中 創建一個方法用來接受 vuex 中的stat // appName(){ // return this.$store.state.appName; // }, // userName(){ // return this.$store.state.user.userName; // } } } </script> <style scoped> </style> ~~~