5. 求和案例(vuex版)
Count.vue
<template> <div> <h1>当前求和为: {{$store.state.sum}}</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="incrementWait">等一等再加</button> <button @click="incrementOdd">当前求和为奇数再加</button> </div> </template> <script> export default { name: 'Count', data() { return { n: 1 } }, methods: { increment() { // 使用 store 触发 vuex actions中对应的动作 // this.$store.dispatch('increment', this.n) // 由于这个处理不需要进行额外的逻辑处理，可以直接调用 commit 让 mutations 操作数据 this.$store.commit('INCREMENT', this.n) }, decrement() { // 由于这个处理不需要进行额外的逻辑处理，可以直接调用 commit 让 mutations 操作数据 this.$store.commit('DECREMENT', this.n) }, incrementWait() { // 需要进行额外的逻辑处理 // 等一段时间在加 this.$store.dispatch('incrementWait', this.n) }, incrementOdd() { // 需要进行额外的逻辑处理 // 当前求和为奇数再加 this.$store.dispatch('incrementOdd', this.n) } } } </script> <style> button { margin: 5px; } </style>
store/index.js
// 该文件用于创建 vuex 中最为核心的 store // 引入 vue import Vue from 'vue' // 引入 vuex import Vuex from 'vuex' // 使用 vuex Vue.use(Vuex) // 准备 actions 用于响应组件中的动作 const actions = { // 完整写法 // increment: function() {} // 简写 // 第一个参数为 store 的一部分属性组成的对象 // 第二个参数为触发动作传递过来的值 // increment(context, value) { // console.log('actions 中的 increment 被触发', context, value) // // 调用 commit 方法触发 mutations 中对应的函数处理数据 // // commit 中的动作大写，可以与 actions 中的进行区分 // context.commit('INCREMENT', value) // } // 等一等再加 incrementWait(context, value) { console.log('actions 中的 incrementWait 被触发', context, value) setTimeout(() => { context.commit('INCREMENTWAIT', value) }, 500); }, // 当前求和为奇数再加 incrementOdd(context, value) { console.log('actions 中的 incrementOdd 被触发', context, value) // 在 context 对象有 state 属性 if (context.state.sum % 2) { context.commit('INCREMENTODD', value) } } } // 准备 mutations 用于操作数据 state const mutations = { // 第一个参数为 store 对象 // 第二个参数为触发动作传递过来的值 // 加法 INCREMENT(store, value) { console.log('mutations 中的 INCREMENT 被触发', store, value) store.sum += value }, // 减法 DECREMENT(store, value) { console.log('mutations 中的 DECREMENT 被触发', store, value) store.sum -= value }, // 等一等再加 INCREMENTWAIT(store, value) { console.log('mutations 中的 INCREMENTWAIT 被触发', store, value) store.sum += value }, // 当前求和为奇数再加 INCREMENTODD(store, value) { console.log('mutations 中的 INCREMENTODD 被触发', store, value) store.sum += value } } // 准备 state 用于存储数据 const state = { // 当前求和 sum: 0 } // 创建并导出 store export default new Vuex.Store({ actions, mutations, state })
vuex 中的 actions 负责业务逻辑的处理，mutations 负责数据的操作修改。
6. store 中的 getters 配置项
类似于计算属性，可以读取state中数据加工后的值。
6.1 getters 配置项
store/index.js
// 该文件用于创建 vuex 中最为核心的 store ...... // 准备 actions 用于响应组件中的动作 const actions = { ...... } // 准备 mutations 用于操作数据 state const mutations = { ...... } // 准备 state 用于存储数据 const state = { // 当前求和 sum: 0 } // getters const getters = { // 会有一个参数 state // 获取当前求和放大十倍后的值 bigSum(state) { return state.sum * 10 } } // 创建并导出 store export default new Vuex.Store({ actions, mutations, state, getters })
6.2 读取 getters 配置项中的值
在 $store 实例对象中存在一个属性 getters：
Count.vue
<template> <div> <h1>当前求和为: {{$store.state.sum}}</h1> <h1>当前求和放大10倍为: {{$store.getters.bigSum}}</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="incrementWait">等一等再加</button> <button @click="incrementOdd">当前求和为奇数再加</button> </div> </template> <script> export default { name: 'Count', data() { return { n: 1 } }, methods: { increment() { // 使用 store 触发 vuex actions中对应的动作 // this.$store.dispatch('increment', this.n) // 由于这个处理不需要进行额外的逻辑处理，可以直接调用 commit 让 mutations 操作数据 this.$store.commit('INCREMENT', this.n) }, decrement() { // 由于这个处理不需要进行额外的逻辑处理，可以直接调用 commit 让 mutations 操作数据 this.$store.commit('DECREMENT', this.n) }, incrementWait() { // 需要进行额外的逻辑处理 // 等一段时间在加 this.$store.dispatch('incrementWait', this.n) }, incrementOdd() { // 需要进行额外的逻辑处理 // 当前求和为奇数再加 this.$store.dispatch('incrementOdd', this.n) } } } </script> <style> button { margin: 5px; } </style>
7. mapState & mapGetters
导入 mapState & mapGetters：
// 导入 mapState mapGetters import { mapState, mapGetters } from 'vuex'
7.1 mapState 生成 state 数据对应的计算属性
通过 mapState 生成 state 中各个数据对应的计算属性，可以在页面直接使用计算属性名获取 state 中的数据值，而不用通过 $store.state.变量 获取。
mapState方法：用于帮助我们映射state中的数据为计算属性
store/index.js
...... // 准备 state 用于存储数据 const state = { // 当前求和 sum: 0, school: 'SGG', subject: '前端' } ......
7.1.1 对象写法
<template> <div> <h1>当前求和为: {{mySum}}</h1> <h1>当前求和放大10倍为: {{$store.getters.bigSum}}</h1> <h1>学校: {{mySchool}}</h1> <h1>学科: {{mySubject}}</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="incrementWait">等一等再加</button> <button @click="incrementOdd">当前求和为奇数再加</button> </div> </template> <script> // 导入 mapState import {mapState} from 'vuex' export default { name: 'Count', data() { return { n: 1 } }, computed: { // 借助mapState生成计算属性，从state中读取数据。（对象写法） // 借助mapState生成计算属性 返回结果为一个对象 // { // mySum: function() {}, // mySchool: function() {}, // mySubject: function() {} // } // 使用解构将每个函数解构出来并放到computed中 ...mapState({ // mySum 为计算属性名 // 'sum' 为state中的变量名，写成字符串的形式会自动取state中寻找对应的变量 mySum: 'sum', mySchool: 'school', mySubject: 'subject', }) }, methods: { ...... } } </script> <style> button { margin: 5px; } </style>
7.1.2 数组写法
数组写法生成的计算属性名和state中的数据变量名一致。
<template> <div> <h1>当前求和为: {{sum}}</h1> <h1>当前求和放大10倍为: {{$store.getters.bigSum}}</h1> <h1>学校: {{school}}</h1> <h1>学科: {{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="incrementWait">等一等再加</button> <button @click="incrementOdd">当前求和为奇数再加</button> </div> </template> <script> // 导入 mapState import {mapState} from 'vuex' export default { name: 'Count', data() { return { n: 1 } }, computed: { // 借助mapState生成计算属性，从state中读取数据。（对象写法） // ...mapState({ // mySum: 'sum', // mySchool: 'school', // mySubject: 'subject', // }) // 借助mapState生成计算属性，从state中读取数据。（数组写法） // 数组写法生成的计算属性名和state中的数据变量名一致。 ...mapState(['sum', 'school', 'subject']) }, methods: { ...... } } </script> <style> button { margin: 5px; } </style>
7.2 mapGetters 生成 getters 数据对应的计算属性
通过 mapGetters 生成 getters 中各个数据对应的计算属性，可以在页面直接使用计算属性名获取 getters 中的数据值，而不用通过 $store.getters.变量 获取。
mapGetters方法：用于帮助我们映射getters中的数据为计算属性
store/index.js
...... // getters const getters = { // 会有一个参数 state // 获取当前求和放大十倍后的值 bigSum(state) { return state.sum * 10 } } ......
7.2.1 对象写法
Count.vue
<template> <div> <h1>当前求和为: {{sum}}</h1> <h1>当前求和放大10倍为: {{bigSum}}</h1> <h1>学校: {{school}}</h1> <h1>学科: {{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="incrementWait">等一等再加</button> <button @click="incrementOdd">当前求和为奇数再加</button> </div> </template> <script> // 导入 mapState mapGetters import { mapState, mapGetters } from 'vuex' export default { name: 'Count', data() { return { n: 1 } }, computed: { ...... // 借助mapState生成计算属性，从state中读取数据。（数组写法） // 数组写法生成的计算属性名和state中的数据变量名一致。 ...mapState(['sum', 'school', 'subject']), // 借助mapGetters生成计算属性，从getters中读取数据。（对象写法） ...mapGetters({bigSum:'bigSum'}) }, methods: { ...... } } </script> <style> button { margin: 5px; } </style>
7.2.2 数组写法
数组写法生成的计算属性名和getters中的数据变量名一致。
Count.vue
<template> <div> <h1>当前求和为: {{sum}}</h1> <h1>当前求和放大10倍为: {{bigSum}}</h1> <h1>学校: {{school}}</h1> <h1>学科: {{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="incrementWait">等一等再加</button> <button @click="incrementOdd">当前求和为奇数再加</button> </div> </template> <script> // 导入 mapState mapGetters import { mapState, mapGetters } from 'vuex' export default { name: 'Count', data() { return { n: 1 } }, computed: { ...... // 借助mapState生成计算属性，从state中读取数据。（数组写法） // 数组写法生成的计算属性名和state中的数据变量名一致。 ...mapState(['sum', 'school', 'subject']), // 借助mapGetters生成计算属性，从getters中读取数据。（对象写法） // ...mapGetters({bigSum:'bigSum'}) //借助mapGetters生成计算属性，从getters中读取数据。（数组写法） ...mapGetters(['bigSum']) }, methods: { ...... } } </script> <style> button { margin: 5px; } </style>
