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, })
标签:...,school,sum,mapState,state,mapGetters,bigSum,store From: https://www.cnblogs.com/beyondzw/p/17449935.html