- 四個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, })
