1. store->index.js 编辑getters函数
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0, // 相当于data
num:1,
},
getters: {
doubleCount(state){
return 2 * state.count
}
},
mutations: { // 注意,函数实参为state
add(state){
state.count ++
},
decrease(state){
state.count --
}
},
actions: {
delayAdd(context){ // 主要,函数实参为context
setTimeout(() => {
context.commit('add')
}, 1000);
}
},
modules: {
}
})
2. Parent.vue中,在computed中,编辑doubleCount计算,返回值为this.$store.getters.doubleCount
<template>
<div style="background-color: dodgerblue;">
<!-- 读取store参数 方法一: $store.state.count -->
<h3>Parent <span style="color: red;">{
{ count }}</span></h3>
<!-- 读取store参数 方法二: this.$store.state.count 赋值到本地 -->
<!-- <h5>count: {
{ count }}</h5> -->
<!-- 读取getters中的数 -->
<h3>getters : {
{ doubleCount }}</h3>
<button @click="add">add</button>
<button @click="decrease">decrease</button>
<m-child></m-child>
</div>
</template>
<script>
import MChild from './Child.vue'
import { mapMutations, mapState } from 'vuex'
export default {
// computed: {
// // vuex,store中维护的数据,计算给count变量
// count() {
// return this.$store.state.count
// }
// },
// computed:mapState({
// count:'count'
// }),
computed:{
...mapState({
count:'count'
}),
doubleCount(){
return this.$store.getters.doubleCount
}
},
data() {
return {
msg: 'df'
}
},
methods:{
...mapMutations(['add','decrease']), // 注意这里要用引号把函数名引起来
},
components: {
MChild,
},
mounted() {
console.log(this.$store.state)
}
}
</script>
<style></style>
使用mapGetters, 注意, 这里用ES6的展开语句...,然后要写成数组形式,不是对象,如果换名字了写成对象形式。与mapState不同哦!
<template>
<div style="background-color: dodgerblue;">
<!-- 读取store参数 方法一: $store.state.count -->
<h3>Parent <span style="color: red;">{
{ count }}</span></h3>
<!-- 读取store参数 方法二: this.$store.state.count 赋值到本地 -->
<!-- <h5>count: {
{ count }}</h5> -->
<!-- 读取getters中的数 -->
<h3>getters : {
{ doubleCount }}</h3>
<button @click="add">add</button>
<button @click="decrease">decrease</button>
<m-child></m-child>
</div>
</template>
<script>
import MChild from './Child.vue'
import { mapMutations, mapState,mapGetters } from 'vuex'
export default {
// computed: {
// // vuex,store中维护的数据,计算给count变量
// count() {
// return this.$store.state.count
// }
// },
// computed:mapState({
// count:'count'
// }),
computed:{
...mapState({
count:'count'
}),
// doubleCount(){
// return this.$store.getters.doubleCount
// }
...mapGetters([
'doubleCount'
])
},
data() {
return {
msg: 'df'
}
},
methods:{
...mapMutations(['add','decrease']), // 注意这里要用引号把函数名引起来
},
components: {
MChild,
},
mounted() {
console.log(this.$store.state)
}
}
</script>
<style></style>