第五课时-Vuex状态管理stategetter

1. 安装 Vuex
首先在 vue 2.0+ 你的 vue-cli 项目中安装 vuex :

npm install vuex --save

然后 在 src 文件目录下新建一个名为 store 的文件夹，为方便引入并在 store 文件夹里新建一个 index.js, 里面的内容如下:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store();
 
export default store;

接下来，在 main.js 里面引入 store，然后再全局注入一下，这样一来就可以在任何一个组件里面使用 this.$store 了：

import store from './store'// 引入 store
 
new Vue({
  el: '#app',
  router,
  store,// 使用 store
  template: '<App/>',
  components: {App}
})

2. 获取 state：
说了上面的前奏之后，接下来就是纳入正题了，就是开篇说的 state 的玩法。回到 store 文件的 index.js 里面，我们先声明一个 state 变量，并赋值一个空对象给它，里面随便定义两个初始属性值；然后再在实例化的 Vuex.Store 里面传入一个空对象，并把刚声明的变量 state 仍里面：

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={// 要设置的全局访问的 state 对象
     showFooter: true,
     changableNum:0
     // 要设置的初始属性值
   };
 const store = new Vuex.Store({state});
 
export default store;

做完上面的步骤，你已经可以用 this.$store.state.showFooter 或 this.$store.state.changebleNum 在任何一个组件里面获取 showfooter 和 changebleNum 定义的值了，但这不是理想的获取方式；

3. 获取方式 getters
vuex 官方 API 提供了一个 getters，和 vue 计算属性 computed 一样，来实时监听 state 值的变化 (最新状态)，并把它也扔进 Vuex.Store 里面，具体看下面代码:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 const state={   // 要设置的全局访问的 state 对象
     showFooter: true,
     changableNum:0
     // 要设置的初始属性值
   };
const getters = {// 实时监听 state 值的变化 ( 最新状态)
    isShow() {  // 方法名随意, 主要是来承载变化的 showFooter 的值
       return state.showFooter
    },
    getChangedNum(){  // 方法名随意, 主要是用来承载变化的 changableNum 的值
       return state.changebleNum
    }
};
const store = new Vuex.Store({
       state,
       getters
});
export default store;

我们可以通过 this.$store.getters.isShow 和 this.$store.getters.getChangedNum 来获取

4.mapGetters 辅助函数
mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性：

import {mapGetters} from 'vuex'

export default {
  // ...
  computed: {
  // 使用对象展开运算符将 getter 混入 computed 对象中
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}