<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:
方法调用: