<template> <div> <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> </div> </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:
方法调用：