备案控制台
开发者社区 开发与运维 文章 正文

[vue]vuex（二）

2023-08-06 38
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： [vue]vuex（二）

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>



文章标签：
JavaScript
关键词：
vue VUE.js
vue vuex VUE.js
vuex VUE.js
萤火虫的小尾巴
目录
相关文章
sunrr
|
5天前
|
JavaScript 前端开发 安全
Vue响应式设计
【5月更文挑战第30天】Vue响应式设计
sunrr
25 1
你都不懂
|
2天前
|
JavaScript API
vue组合式和选项式
vue组合式和选项式
你都不懂
4 2
前端菜鸟的自我修养
|
4天前
|
JavaScript 程序员 网络架构
vue路由从入门到进阶 --- 声明式导航详细教程
vue路由从入门到进阶 --- 声明式导航详细教程
前端菜鸟的自我修养
20 0
vue路由从入门到进阶 --- 声明式导航详细教程
前端菜鸟的自我修养
|
4天前
|
资源调度 JavaScript UED
vue路由的基础知识总结，vueRouter插件的安装与使用
vue路由的基础知识总结，vueRouter插件的安装与使用
前端菜鸟的自我修养
32 0
前端菜鸟的自我修养
|
4天前
|
JavaScript
vue系列之 插槽(Slot) 详解
vue系列之 插槽(Slot) 详解
前端菜鸟的自我修养
14 0
vue系列之 插槽(Slot) 详解
sunrr
|
5天前
|
编解码 JavaScript API
Vue在移动端的表现如何？
【5月更文挑战第30天】Vue在移动端的表现如何？
sunrr
12 2
sunrr
|
5天前
|
JavaScript 前端开发 API
Vue与其他框架的对比优势
【5月更文挑战第30天】Vue与其他框架的对比优势
sunrr
11 1
_长银_
|
5天前
|
JavaScript
Vue常用知识点总结
Vue常用知识点总结
_长银_
13 0
wishCoding
|
6天前
|
JavaScript Java 测试技术
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
基于vue和微信小程序的校园自助打印系统+springboot+vue.js附带文章和源代码设计说明文档ppt
wishCoding
26 7
不摸鱼的程序员
|
6天前
|
JSON JavaScript 前端开发
Vue 知识扫盲
Vue 知识扫盲
不摸鱼的程序员
9 1

热门文章

最新文章

  • 1
    Vue+Django+MySQL搭建指南（个人全栈快速开发）
  • 2
    在VSCode中 使用 ESLint + Prettier检查代码规范及自动格式化前端Vue代码
  • 3
    vue项目实战 — — 那些自己给自己挖的深坑
  • 4
    vue jsx 使用指南
  • 5
    手把手教你用 Vue 搭建带预览的「上传图片」管理后台
  • 6
    Vue中 使用 v-for 时动态绑定 ref
  • 7
    VUE3（二十一）vue-router 在新窗口打开页面的功能
  • 8
    Vue2+VueRouter2+webpack 构建项目
  • 9
    使用 Vue 2.0 实现服务端渲染的 HackerNews
  • 10
    vue 路由demo
  • 1
    在vue中，在哪个生命周期内调用异步请求？
    52
  • 2
    在vue中，Vue 的父组件和子组件生命周期钩子函数执行顺序？
    22
  • 3
    在vue中，直接给一个数组项赋值，Vue 能检测到变化吗？
    49
  • 4
    在vue中，computed 和 watch 的区别和运用的场景？
    18
  • 5
    在vue中，怎样理解 Vue 的单向数据流？
    30
  • 6
    在vue中，Class 与 Style 如何动态绑定？
    18
  • 7
    在vue中，v-show 与 v-if 有什么区别？
    26
  • 8
    在vue中，如何实现SPA单页面应用的路由管理？
    28
  • 9
    在vue中，说说你对 SPA 单页面的理解，它的优缺点分别是什么？
    48
  • 10
    解决Vue 3 + Element Plus树形表格全选多选以及子节点勾选的问题
    95

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    2024年阿里云免费云服务器及学生云服务器申请教程参考