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