mapState 与 mapGetters
- 四个map 方法的使用:
1. mapState方法: 用于映射 state 中的数据为计算属性
computed: {
...mapState({sum: 'sum', school: 'school'}),
...mapState(['sum', 'school']),
}
2. mapGetters方法: 用于映射 getters 中的数据为计算属性
computed: {
...mapGetters({bigSum: 'bigSum'}),
...mapGetters(['bigSum']),
}
3. mapActions方法:用于生成与 actions 对话的方法,即:包含 $store.dispatch(xx) 的函数methods: {
// 手写方法
incrementOdd(value) {
this.$store.dispatch('jiaOdd', value)
}
// 靠 mapActions 生成, incrementOdd、incrementWait(对象形式)
...mapActions({incrementOdd: 'jiaOdd', incrementWait: 'jiaWait'})
// 靠 mapActions 生成, incrementOdd、incrementWait(数组形式)
...mapActions(['jiaOdd','jiaWait'])
}
4. mapMutations 方法:用于生成与 mutations 对话的方法,即:包含 $store.commit(xx) 的函数
methods: {
// 手写方法
increment(value) {
this.$store.commit('JIA', value)
}
// 靠 mapMutations 生成, increment、decrement(对象形式)
...mapMutations({increment: 'JIA', decrement: 'JIAN'})
// 靠 mapMutations 生成, increment、decrement(数组形式)
...mapMutations(['JIA','JIAN'])
}
备注: mapActions 与 mapMutations 使用时,若需要传递参数需要:在模板中绑定事件时传递好参数,否则参数是事件对象 mouseEvent。
Count.vue 文件
<template>
<div>
<h1>当前求和为:{{sum}}</h1>
<h1>当前求和放大十倍为:{{bigSum}}</h1>
<h1>我在{{school}},学习{{subject}}</h1>
<select v-model.number="n">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<button @click="increment">+</button>
<button @click="decrement">-</button>
<button @click="incrementOdd">当前求和为奇数再加</button>
<button @click="incrementWait">等一等再加</button>
</div>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
name: 'Count',
data() {
return {
n:1, // 用户选择的数字
}
},
computed: {
// 1. 亲自写计算属性
// sum() {
// return this.$store.state.sum
// },
// school() {
// return this.$store.state.school
// },
// subject() {
// return this.$store.state.subject
// }
// 2. 借助 mapState 生成计算属性,从 state 中读取数据 (对象写法)
// ...mapState({sum: 'sum', school: 'school', subject: 'subject'}),
// 3. 借助 mapState 生成计算属性,从 state 中读取数据 (数组写法)
...mapState(['sum', 'school', 'subject']),
// 1. 自己写计算属性
// bigSum() {
// return this.$store.getters.bigSum
// },
// 2. 借助 mapGetters 生成计算属性,从 getters 中读取数据 (对象写法)
// ...mapGetters({bigSum: 'bigSum'}),
// 3. 借助 mapGetters 生成计算属性,从 getters 中读取数据 (数组写法)
...mapGetters(['bigSum']),
},
methods: {
increment() {
this.$store.commit('ADD', this.n) // commit 直接和 mutations 对话,操作数据
},
decrement() {
this.$store.commit('DECREMENT', this.n)
},
incrementOdd() {
this.$store.dispatch('addOdd', this.n) // dispatch 和 actions 对话
},
incrementWait() {
this.$store.dispatch('addWait', this.n)
}
},
mounted() {
console.log(mapState({sum: 'sum', bigSum: 'bigSum', school: 'school', subject: 'subject'}))
}
}
</script>
index.js 文件
// 该文件用于创建 vuex 中最为核心的 store
import Vue from 'vue'
// 引入 vuex
import Vuex from 'vuex'
Vue.use(Vuex)
// 准备 actions —— 用于响应组件中的动作
const actions = {
addOdd(context, value) {
if (context.state.sum % 2) {
context.commit('ADD', value)
}
},
addWait(context, value) {
setTimeout(() => {
context.commit('ADD', value)
}, 500)
}
}
// 准备 mutations —— 用于操作数据(state)
const mutations = {
ADD(state, value) {
state.sum += value
},
DECREMENT(state, value) {
state.sum -= value
},
}
// 准备 state —— 用于存储数据
const state = {
sum: 0, // 当前的和
school: 'xxx学校',
subject: '英语',
}
// 准备 getters —— 用于将 state 中的数据进行加工
const getters = {
bigSum(state) {
return state.sum * 10
}
}
export default new Vuex.Store({
actions,
mutations,
state,
getters,
})
生活是痛苦的白天,死亡是凉爽的夜晚。