目录
一、getters配置项
1. 概念：当state中的数据需要经过加工后在使用时，可以使用getters加工
2. 在store.js中追加getters配置：
...
// 准备getters - 用于将state中的数据进行加工
const getters = {
自定义命名(state){
return ......
}
}
// 创建并暴露store
export default new Vuex.Store({
...
getters
})3. 在组件中读取数据：$store.getters.自定义命名
二、四个map方法的使用
2.1 mapState
用于映射 state 中的数据为计算属性
/* mapState方法 */
computed: {
// 借助mapState生成计算属性 - 对象写法
...mapState({ 自定义命名1:'state数据1', 自定义命名2:'state数据2', 自定义命名3:'state数据3' }),
// 借助mapState生成计算属性（当自定义命名与state中数据命名一样时） - 数组写法
...mapState(['state数据1', 'state数据2', 'state数据3']),
/* 即'state数据1'既作为自定义数据命名，又从state中数据1读取数据 */
},2.2 mapGetters
用于映射 getters 中的数据为计算属性
/* mapGetters方法 */
computed: {
// 借助mapGetters生成计算属性 - 对象写法
...mapGetters({ 自定义命名1:'state数据1', 自定义命名2:'state数据2', 自定义命名3:'state数据3' }),
// 借助mapGetters生成计算属性（当自定义命名与getters中数据命名一样时） - 数组写法
...mapGetters(['state数据1', 'state数据2', 'state数据3']),
},2.3 mapActions
用于生成与actions对话的方法，即包含$store.dispath(xxx)的函数
methods: {
// 靠mapActions生成与actions对话的方法 - 对象形式
...mapActions({ 事件1: "actions方法1", 事件2: "actions方法2" }),
// 靠mapActions生成与actions对话的方法(事件与actions方法命名相同时) - 数组形式
...mapActions([ "actions方法1", "actions方法2" ]),
},2.4 mapMutations
用于生成与mutations对话的方法，即包含$store.commit(xxx)的函数
methods: {
// 靠mapMutations生成与mutations对话的方法 - 对象形式
...mapMutations({ 事件1: "mutations方法1", 事件2: "mutations方法2" }),
// 靠mapMutations生成与mutations对话的方法(事件与mutations方法命名相同时) - 数组形式
...mapMutations(["mutations方法1", "mutations方法2"]),
},注意：mapActions 与 mapMutations，若需要传递参数则需要：在模板中绑定事件时传递好参数，否则参数是事件对象
2.5 案例练习
2.5.1 index.js - store配置
准备getters对象 - 用于将state中的数据进行加工
// 引入Vue核心库
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 应用Vuex插件
Vue.use(Vuex);
// 准备actions对象 - 响应组件中用户的动作
const actions = {
add(context, value) {
context.commit("ADD", value);
},
sub(context, value) {
context.commit("SUB", value);
},
addOdd(context, value) {
if (context.state.sum % 2) {
context.commit("ADD", value);
}
},
addWait(context, value) {
setTimeout(() => {
context.commit("ADD", value);
}, 1000);
},
};
// 准备mutations对象 - 修改state中的数据
const mutations = {
ADD(state, value) {
state.sum += value;
},
SUB(state, value) {
state.sum -= value;
},
};
// 准备state对象 - 保存具体数据
const state = {
sum: 0,
};
// 准备getters对象 - 用于将state中的数据进行加工
const getters = {
bigSum(state) {
return state.sum * 10;
},
};
// 创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state,
getters,
});
2.5.2 Count.vue - 求和组件
- 模板中添加一个需要引入加工数据的模块
-
引入mapState, mapGetters, mapActions, mapMutations
-
借助mapState、mapGetters生成计算属性
-
靠 mapActions 和 mapMutations 分别生成与actions和mutations对话的方法
<template>
<div style="padding: 20px">
<h1>当前求和为:{{ sum }}</h1>
<!-- 模板中添加一个需要引入加工数据的模块 -->
<h3>当前求和放大10倍为:{{ bigSum }}</h3>
<select v-model="n">
<option :value="1">1</option>
<option :value="2">2</option>
<option :value="3">3</option>
</select>
<!-- 注意：mapActions 与 mapMutations，若需要传递参数则需要：在模板中绑定事件时传递好参数，否则参数是事件对象 -->
<button @click="increment(n)">+</button>
<button @click="decrement(n)">-</button>
<button @click="incrementOdd(n)">当前求和为奇数再加</button>
<button @click="incrementWait(n)">等1s后再加</button>
</div>
</template>
<script>
// 引入mapState, mapGetters, mapActions, mapMutations
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
name: "Count",
data() {
return {
n: 1, // 用户选择的数字
};
},
computed: {
// 借助mapState生成计算属性 - 数组写法
...mapState(["sum"]),
// 借助mapGetters生成计算属性 - 对象写法
...mapGetters({ bigSum: "bigSum" }),
},
methods: {
// 靠mapMutations生成与mutations对话的方法 - 对象形式
...mapMutations({ increment: "ADD", decrement: "SUB" }),
// 靠mapActions生成与actions对话的方法 - 对象形式
...mapActions({ incrementOdd: "addOdd", incrementWait: "addWait" }),
},
};
</script>
三、多组件共享数据
以 2.5 案例练习 为基础，添加了Game组件，Count组件中可以显示Game组件中的游戏个数，Game组件中可以显示Count组件求和
3.1 Count.vue
<template>
<div style="padding: 20px">
<h1>当前求和为:{{ sum }}</h1>
<!-- 模板中添加一个需要引入加工数据的模块 -->
<h3>当前求和放大10倍为:{{ bigSum }}</h3>
<h3>下方组件游戏个数：{{ gameList.length }}</h3>
<select v-model="n">
...
</select>
<!-- 注意：mapActions 与 mapMutations，若需要传递参数则需要：在模板中绑定事件时传递好参数，否则参数是事件对象 -->
...
</div>
</template>
<script>
// 引入mapState, mapGetters, mapActions, mapMutations
import { mapState, mapGetters, mapActions, mapMutations } from "vuex";
export default {
name: "Count",
data() {
return {
n: 1, // 用户选择的数字
};
},
computed: {
// 借助mapState生成计算属性 - 数组写法
...mapState(["sum", "gameList"]),
// 借助mapGetters生成计算属性 - 对象写法
...mapGetters({ bigSum: "bigSum" }),
},
methods: {
...
},
};
</script>3.2 Game.vue
<template>
<div style="padding: 20px">
<h1>游戏列表</h1>
<input type="text" placeholder="请输入游戏名" v-model="name" />
<button @click="add">添加</button><br />
<h3>上方Count组件求和为:{{ sum }}</h3>
<ul>
<li v-for="g in gameList" :key="g.id">{{ g.name }}</li>
</ul>
</div>
</template>
<script>
import { mapState } from "vuex";
// 引入nanoid-第三方
import { nanoid } from "nanoid";
export default {
name: "Game",
data() {
return {
name: "",
};
},
computed: {
...mapState(["gameList", "sum"]),
},
methods: {
add() {
const gameObj = { id: nanoid(), name: this.name };
this.$store.commit("ADD_GAME", gameObj);
this.name = "";
},
},
};
</script>3.3 index.js - Store配置
// 引入Vue核心库
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 应用Vuex插件
Vue.use(Vuex);
// 准备actions对象 - 响应组件中用户的动作
const actions = {
...
};
// 准备mutations对象 - 修改state中的数据
const mutations = {
...
ADD_GAME(state, value) {
state.gameList.unshift(value);
},
};
// 准备state对象 - 保存具体数据
const state = {
sum: 0,
gameList: [],
};
// 准备getters对象 - 用于将state中的数据进行加工
const getters = {
...
};
// 创建并暴露store
export default new Vuex.Store({
...
});3.4 App.vue
<template>
<div>
<h1>Count组件</h1>
<Count></Count>
<hr />
<h1>Game组件</h1>
<Game></Game>
</div>
</template>
<script>
import Count from "./components/Count.vue";
import Game from "./components/Game.vue";
export default {
name: "App",
components: { Count, Game },
};
</script>
<style></style>由图示可以看出，在Game组件中添加游戏个数，上方Count组件中游戏个数显示也会跟随变化；Count组件中求和发生变化，Game组件中的求和也会跟随变化，两组件共享了数据
1550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
