Vuex之...mapGetters(["變量名"]) 實踐體會

 ...mapGetters(["變量名"])  是屬於Vuex原生的知識,所以如有要學習知道所以然, 入口是 Vuex官網  Vuex API

話說回來, 如果自己摸索, 為知道了入口在哪里, 也是要花費精力和時間的. 所以找對入口, 就可以保證方向是對的.

參考  vuex中mapGetters的使用及簡單實現原理

 

1). 屬於vuex知識體系范疇

2). getters是vuex中的特殊表達部分。於是，需要知道，vuex的getters是什么？  參考

3). 若有多個getter時，可用...mapGetters([ ]),需要先export引入，且是es6語法，需要安裝bable插件,這樣寫可以簡化代碼.  參考

4). 怎樣理解: 由於getters已經通過computed掛載到當前實例,所以代碼中不需要再通過this.$store.getters的方法去訪問

 

體會1: 充滿了各種約定, 所以看官方的API是必須的

體會2: getter.js 是Vuex取值的總入口

體會3: 在new Vue對象時,傳入Vuex對象, 引用名通常為store, 之后在vue組件中,就可以全局訪問了,如this.$store.dispatch("setNumber", 10)

體會4: 執行Vuex的dispathch(參數1, 參數2)方法,會尋找action中對應的方法,這里對應book.js中的

體會5: Vue中可以使用ES語法,包括ES6

體會6: 不錯地學習ES語法例子

在組件的computed屬性中...mapGetters(["number"]) 代碼的作用
為組件創建computed(計算屬性),並返回 getter 中對應的返回值, 即在組件中引入mapGetters就是將vuex中的數據映射到組件的計算屬性當中
這里為HelloWorld.vue創建計算屬性number,number的值取之getters.js中對於的number, 所以之后問題及就是怎樣設計getters.js

 

 HelloWord.vue 

9-23: 僅僅為了演示ES6新增語法, ... 對象展開運費符

33: 屬於Vuex原生的語法,通過引入mapGetters可以輕松的取到vuex中存儲的數據,並在此vue頁面中構建成計算屬性並返回getter的返回值,至於怎么用,為什么是這樣,是官網中原生預定義的

34: 演示ES6新增語法 ...稱:對象展開運算符,

37-39: 調用book.js中的actions中的setNumber,所以掌握actions下function怎樣設計

37: 為什么$store可以訪問? 即在main.js new Vue 時傳入的,可以理解為Vue原生的語法, 所以如果要掌握coding,需要查看下Vuex的API

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
const getters = {
  a: () => 1,
  b: () => 2,
  c: () => 3
};

function fn(keys) {
  const data = {};
  keys.forEach(key => {
    if (getters.hasOwnProperty(key)) {
      data[key] = getters[key];
    }
  });
  return data;
}

export default {
  name: "HelloWorld",
  data() {
    return {
      msg: "Welcome to Your Vue.js App"
    };
  },
  computed: {
    ...mapGetters(["number"]), 
    ...fn(["a", "b", "c"])
  },
  mounted() {
    this.$store.dispatch("setNumber", 10).then(() => {
      console.log(this.number);
    });
    console.log(this.a, this.b, this.c);
  }
};
</script>

  main.js 

//引入狀態管理模塊
import store from './store';

new Vue({
  el: '#app',
  router,
  store,//為Vue增加vuex狀態管理
  components: { App },
  template: '<App/>'
})

 src\store\index.js 

提示:如Vuex沒有安裝,需要安裝 npm install --save vuex

import book from './modules/book';
import getters from './getters';
Vue.use(Vuex);

const store = new Vuex.Store({
  modules:{
    book
  },
  getters
})

export default store

 src\store\getters.js 

const getters = {
    number: state => state.book.number  //默認行為:對應book.js中state屬性
}
export default getters

 src\store\modules\book.js  

const book = {
  state: {
    number: 1 }, mutations: { SET_NUMBER: (state, number) => { state.number = number } }, actions: { setNumber: ({ commit, state }, number) => { // console.log(state.number, number) return commit('SET_NUMBER', number) } } } export default book

其它例子

<el-form-item label="工作地點" prop="City">
  <el-cascader :options="$store.getters.city_item" :props="optionProps" placeholder="請選工作地點"
               v-model="formData.City" :show-all-levels="false" filterable>
  </el-cascader>
</el-form-item>

讀作到Vuex狀態管理工具,加載以city_item引用數據,$store是在模板標簽的屬性值,至於$store為什么可以全局訪問,是在main.js new Vue時被掛載的;getters對應Vuex的getters.js, 它在new Vuex.Store時被加載; city_item是自定義變量,定義在getters.js中

Vuex取"值"模式:定義getters.js 模塊
Vuex存"值"模式:定義一個js文件,在new View.Store時作為modules參數, modules對應的js文件約定3個屬性: 1).state; 2).mutations; 3).actions, 參考book.js