vuex里mapState,mapGetters使用详解

此次给你们带来vuex里mapState,mapGetters使用详解，vuex里mapState,mapGetters使用的注意事项有哪些，下面就是实战案例，一块儿来看一下。

 

1、介绍 vuex里面的四大金刚：State， Mutations，Actions，Getters

（上次记得关于vuex笔记 http://www.jb51.net/article/138229.htm,是一个简单的应用；这是一些简单的vue的小组件方法： http://www.jb51.net/article/138230.htm）

何为四大金刚？

　　1.State （这里能够是 小写的 state，跟官网保持一致，采用大写，由于我的习惯，后面的代码介绍采用小写）

　　vuex的状态管理，须要依赖它的状态树，官网说：

　　Vuex 使用单一状态树——是的，用一个对象就包含了所有的应用层级状态。至此它便做为一个“惟一数据源 (SSOT)”而存在。这也意味着，每一个应用将仅仅包含一个 store 实例。单一状态树让咱们可以直接地定位任一特定的状态片断，在调试的过程当中也能轻易地取得整个当前应用状态的快照。

　　简单粗暴理解： 咱们要把咱们须要作状态管理的量放到这里来，而后在后面的操做动它

　　咱们来声明一个state：

const state = { 
 blogTitle: '迩伶贰blog',
 views: 10,
 blogNumber: 100,
 total: 0,
 todos: [
 {id: 1, done: true, text: '我是码农'},
 {id: 2, done: false, text: '我是码农202号'},
 {id: 3, done: true, text: '我是码农202号'}
 ]
}

 

　咱们有了state状态树，咱们要改变它的状态（值），就必须用vue指定惟一方法 mutation，官网说：2. Mutation

　更改 Vuex 的 store 中的状态的惟一方法是提交 mutation。Vuex 中的 mutation 很是相似于事件：每一个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。

　简单粗暴理解：任何不以mutation的方式改变state的值，都是耍流氓（违法）

咱们来一个mutation：

1 2 3 4 5 6 7 8 9 10 11

const mutation = {  addViews (state) {  state.views++  },  blogAdd (state) {  state.blogNumber++  },  clickTotal (state) {  state.total++  } }

3.Action

　　action 的做用跟mutation的做用是一致的，它提交mutation，从而改变state，是改变state的一个加强版，官网说：

　　Action 相似于 mutation，不一样在于：

Action 提交的是 mutation，而不是直接变动状态。

Action 能够包含任意异步操做。

　　简单粗暴理解： 额，这总结的差很少了，就这样理解吧！

　　咱们来一个action：

1 2 3 4 5 6 7 8 9 10 11

const actions = {  addViews ({commit}) {  commit('addViews')  },  clickTotal ({commit}) {  commit('clickTotal')  },  blogAdd ({commit}) {  commit('blogAdd')  } }

4.Getter

官网说：有时候咱们须要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数。减小咱们对这些状态数据的操做

简单粗暴理解：状态树上的数据比较复杂了，咱们使用的时候要简化操做，上面的state.todos 是一个对象，在组件中挑不一样的数据时，须要对其作下处理，这样每次须要一次就处理一次，咱们简化操做，将其在getter中处理好，而后export 一个方法；（额，好像说复杂了）

咱们来一个getter：

1 2 3 4 5 6

const getters = {  getToDo (state) {  return state.todos.filter(item => item.done === true)  // filter 迭代过滤器 将每一个item的值 item.done == true 挑出来， 返回的是一个数组  } }

2、使用

学不用，傻学，没啥用，咱们得用起来：

一、src 下新建文件

咱们在项目（vue-cli 脚手架）下 src 文件夹下新建一个 store，在这个store下新建 index.js 文件，将上面的代码填入，以下面完整的内容：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {  blogTitle: '迩伶贰blog',  views: 10,  blogNumber: 100,  total: 0,  todos: [  {id: 1, done: true, text: '我是码农'},  {id: 2, done: false, text: '我是码农202号'},  {id: 3, done: true, text: '我是码农202号'}  ] } const actions = {  addViews ({commit}) {  commit('addViews')  },  clickTotal ({commit}) {  commit('clickTotal')  },  blogAdd ({commit}) {  commit('blogAdd')  } } const mutations = {  addViews (state) {  state.views++  },  blogAdd (state) {  state.blogNumber++  },  clickTotal (state) {  state.total++  } } const getters = {  getToDo (state) {  return state.todos.filter(item => item.done === true)  // filter 迭代过滤器 将每一个item的值 item.done == true 挑出来， 返回的是一个数组  } } export default new Vuex.Store({  state,  actions,  mutations,  getters }) // 将四大金刚挂载到 vuex的Store下

二、main.js 导入文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import Vue from 'vue' import App from './App' import router from './router/router.js' // 引入 状态管理 vuex import store from './store' // 引入elementUI import ElementUI from 'element-ui' // 引入element的css import 'element-ui/lib/theme-chalk/index.css' // 引入font-awesome的css import 'font-awesome/css/font-awesome.css' // 引入本身的css import './assets/css/custom-styles.css' Vue.config.productionTip = false Vue.use(ElementUI) /* eslint-disable no-new */ new Vue({  el: '#app',  router,  store,  template: '<App/>',  components: { App } })

请着重看加粗部分，非加粗部分是import 其余项目功能

三、组件中使用

先上这个组件代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

<template>  <p>  <h4>vuex的状态管理数据</h4>  <h5>博客标题</h5>  <i>  {{this.$store.state.blogTitle}}  </i>  <h5>todos里面的信息</h5>  <ul>  <li v-for = "item in todosALise" :key="item.id">  <span>{{item.text}}</span> <br>  <span>{{item.done}}</span>  </li>  </ul>  <h5>初始化访问量</h5>  <p>  mapState方式 {{viewsCount}}；<br>  直接使用views {{this.$store.state.views}}  </p>  <h4>blogNumber数字 </h4>  <span>state中blogNumber：{{this.$store.state.blogNumber}}</span>  <h4>总计</h4>  <span>state中total：{{this.$store.state.total}}</span>  <p>  <button @click="totalAlise">点击增长total</button>  </p>     </p> </template> <style> </style> <script> import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' export default {  data () {  return {  checked: true  }  },  created () {  // this.$store.dispatch('addViews') // 直接经过store的方法 触发action, 改变 views 的值  this.blogAdd() // 经过mapActions 触发mutation 从而commit ，改变state的值  },  computed: {  ...mapState({  viewsCount: 'views'  }),  ...mapGetters({  todosALise: 'getToDo' // getToDo 不是字符串，对应的是getter里面的一个方法名字 而后将这个方法名字从新取一个别名 todosALise  })  },  methods: {  ...mapMutations({  totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法，totalAlise是从新定义的一个别名方法，本组件直接调用这个方法  }), 　　 ...mapActions({  blogAdd: 'blogAdd' // 第一个blogAdd是定义的一个函数别名称，挂载在到this(vue)实例上，后面一个blogAdd 才是actions里面函数方法名称  }) } } </script>

mapState, mapGetters, mapActions, mapMutations

这些名字呢，是对应四大金刚的一个辅助函数，

a).mapState，官网说：

当一个组件须要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，咱们可使用 mapState 辅助函数帮助咱们生成计算属性，让你少按几回键：

对于官网给出的例子，截个图，供学习，详情请进官网：https://vuex.vuejs.org/zh-cn/state.html , 我记录下官网说的少的 ...mapState() 方法

vue 如今好多例子，都是用es6 写的，es6中增长了好多神兵利器，咱们也得用用。咱们也要用‘对象展开运算符'，这个具体的用法，请参考具体的学习资料，咱们主要讲讲 ...mapState({...}) 是什么鬼。

下面实例代码中：

html:

1 2 3 4

<p> 　　mapState方式 {{viewsCount}}；<br> 　　直接使用views {{this.$store.state.views}} </p>

js:

1 2 3

...mapState({  viewsCount: 'views'  }),

　　咱们须要使用一个工具函数将多个对象合并为一个，这个 ... 方法就合适了，将多个函数方法合并成一个对象，而且将vuex中的this.$store.views

映射到this.viewsCount (this -> vue)上面来，这样在多个状态时能够避免重复使用，并且当映射的值和state 的状态值是相等的时候，能够是直接使用

1 2 3

...mapState({  'views'  }),

b).mapMutations 其实跟mapState 的做用是相似的，将组件中的 methods 映射为 store.commit 调用

上面的代码：

html:

1 2 3 4

<span>{{this.$store.state.total}}</span>  <p>  <button @click="totalAlise">点击增长total</button>  </p>

js:

1 2 3

...mapMutations({  totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法，totalAlise是从新定义的一个别名方法，本组件直接调用这个方法  })

c). mapActions, action的一个辅助函数，将组件的 methods 映射为 store.dispatch 调用

上例代码：

html：

1 2	<h4>blogNumber数字 </h4>  <span>state中blogNumber：{{this.$store.state.blogNumber}}</span>

js:

方法调用：

1 2 3 4

created () {  // this.$store.dispatch('blogAdd') // 直接经过store的方法 触发action, 改变 views 的值  this.blogAdd() // 经过mapActions 触发mutation 从而commit ，改变state的值  },

方法定义：

1 2	...mapActions({ blogAdd: 'blogAdd' // blogAdd是定义的一个函数别名称，挂载在到this(vue)实例上，blogAdd 才是actions里面函数方法名称 })

d). mapGetter 仅仅是将 store 中的 getter 映射到局部计算属性：

html:

1 2 3 4 5 6 7 8 9

<h5>todos里面的信息</h5>  <ul>  <li v-for = "item in todosALise" :key="item.id"> 　　　　　　// <li v-for = "item in this.$store.state.todos" :key="item.id"> 这里就是直接读取store的值，没有作过滤操做，若是须要过滤。 　　　　　　　　还须要单独写方法操做  <span>{{item.text}}</span> <br>  <span>{{item.done}}</span>  </li>  </ul>

js:

1 2 3

...mapGetters({  todosALise: 'getToDo' // getToDo 不是字符串，对应的是getter里面的一个方法名字 而后将这个方法名字从新取一个别名 todosALise  }),

这个 getToDo 是在getters 定义的一个方法，它将todos 里的对象属性done为true的之过滤出来

1 2 3 4

getToDo (state) {  return state.todos.filter(item => item.done === true)  // filter 迭代过滤器 将每一个item的值 item.done == true 挑出来， 返回的是一个数组  }

上面代码操做后的效果截图：