这次，我们将详细介绍如何在vuex中使用mapState、mapGetters。 在vuex上使用地图状态、地图获取器时的注意事项是什么？ 介绍实战的案例。 一起看看吧。
一、介绍 vuex里面的四大金刚：State， Mutations，Actions，Getters
(我记得上次关于vuex笔记本http://www.jb51.net/article/138229.htm，它是一个简单的APP； 这是一种简单的vue小部件方法。 http://www.jb51.net/article/138230.htm )
四大金刚是什么？
1.State (这里可以是小写的state。 与官方网站一致采用大写字母。 由于个人习惯，后面的代码介绍采用小写字母)。
vuex的状态管理需要依赖于此的状态树，官方网站表示。
Vuex使用单个状态树——。 是的。 在一个对象中包含所有APP应用程序级别的状态。 到目前为止，它作为“唯一的数据源(SSOT )”存在。 这意味着每个APP应用程序只包含一个store实例。 通过使用单个状态树，可以直接找到特定的状态片段，并在调试过程中轻松获取整个当前APP应用程序状态的快照。
简单粗暴的理解：把我们必须进行状态管理的量放在这里，在以后的操作中移动它
让我们声明state :
const state={ blogtitle :’迩伶贰blog’，views: 10，blogNumber: 100，total: 0，todos: [ {id: 1，done 3360 ] done: false，text:“我是旋风202号”}，{id:done: true，text: '我是旋风2360
要查看状态树并更改其状态(值)，必须在vue中指定唯一的方法mutation。 根据官方网站，情况如下。
更改Vuex存储状态的唯一方法是提交mutation。 Vuex的mutation与事件非常相似。 每个mutation都有字符串事件类型(type )和回调函数(handler )。
简单地说，不在mutation中改变state的值是流氓(违法)
请给我mutation :
constmutation={addviews(state ) { state.views }，blogadd ) state ) { state.blogNumber }，click total } state
官网表示，操作的作用与mutation的作用一致，提出mutation改变状态是改变状态的扩展版：
动作与mutation类似，但有以下不同之处：
操作提交mutation，而不是直接更改状态。
Action可以包含任何异步操作。
简单粗暴的理解：额，这个差不多总结好了，这样理解吧。
我们来action :
const actions={ add views } { commit } { commit } { add views ' }，click total { commit } { click total ' }
根据官方网站，可能需要从store的state中派生过滤和计数列表等状态。 减少对这些状态数据的操作
简单地理解，状态树中的数据变得复杂了。 我们使用时简化操作。 上面的state.todos是一个对象，在组件中选择不同的数据时，必须按如下方式处理： 那样的话，就需要根据需要一次一次地处理。 我们的方法是简化操作，用getter处理它，然后导出。 (额，好像说得很复杂) ) ) ) ) ) )。
让我们看看getter :
constgetters={gettodo(state ) returnstate.todos.filter ) item=item.done==true )//filter迭代滤波器将每个item的值设置为
不，是笨蛋。 没什么用。 我们必须使用。
2. Mutation
在项目(vue-cli脚手架)下的src文件夹下创建新的store，在此store下创建新的index.js文件，然后填写上面的代码。 如下完整内容。
impor
t 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下2、main.js 导入文件
import Vue from 'vue'import App from './App'import router from './router/router.js'// 引入 状态管理 vueximport store from './store'// 引入elementUIimport ElementUI from 'element-ui'// 引入element的cssimport 'element-ui/lib/theme-chalk/index.css'// 引入font-awesome的cssimport 'font-awesome/css/font-awesome.css'// 引入自己的cssimport './assets/css/custom-styles.css'Vue.config.productionTip = falseVue.use(ElementUI)/* eslint-disable no-new */new Vue({ el: '#app', router, store, template: '<App/>', components: { App }})请着重看加粗部分，非加粗部分是import 其他项目功能
3、组件中使用
先上这个组件代码：
<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:
<p> mapState方式 {{viewsCount}}；<br> 直接使用views {{this.$store.state.views}}</p>js:
...mapState({ viewsCount: 'views' }),我们需要使用一个工具函数将多个对象合并为一个，这个 ... 方法就合适了，将多个函数方法合并成一个对象，并且将vuex中的this.$store.views
映射到this.viewsCount (this -> vue)上面来，这样在多个状态时可以避免重复使用，而且当映射的值和state 的状态值是相等的时候，可以是直接使用
...mapState({ 'views' }),b).mapMutations 其实跟mapState 的作用是类似的，将组件中的 methods 映射为 store.commit 调用
上面的代码：
html:
<span>{{this.$store.state.total}}</span> <p> <button @click="totalAlise">点击增加total</button> </p>js:
...mapMutations({ totalAlise: 'clickTotal' // clickTotal 是mutation 里的方法，totalAlise是重新定义的一个别名方法，本组件直接调用这个方法 })c). mapActions, action的一个辅助函数，将组件的 methods 映射为 store.dispatch 调用
上例代码：
html：
<h4>blogNumber数字 </h4> <span>state中blogNumber：{{this.$store.state.blogNumber}}</span>js:
方法调用：
created () { // this.$store.dispatch('blogAdd') // 直接通过store的方法 触发action, 改变 views 的值 this.blogAdd() // 通过mapActions 触发mutation 从而commit ，改变state的值 },方法定义：
...mapActions({blogAdd: 'blogAdd' // blogAdd是定义的一个函数别名称，挂载在到this(vue)实例上，blogAdd 才是actions里面函数方法名称 })d). mapGetter 仅仅是将 store 中的 getter 映射到局部计算属性：
html:
<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:
...mapGetters({ todosALise: 'getToDo' // getToDo 不是字符串，对应的是getter里面的一个方法名字 然后将这个方法名字重新取一个别名 todosALise }),这个 getToDo 是在getters 定义的一个方法，它将todos 里的对象属性done为true的之过滤出来
getToDo (state) { return state.todos.filter(item => item.done === true) // filter 迭代过滤器 将每个item的值 item.done == true 挑出来， 返回的是一个数组 }上面代码操作后的效果截图：