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

[vue]vuex（三）

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

8. mapActions & mapMutations

8.1 mapMutations

mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数

借助mapMutations生成对应的方法，方法中会调用commit去联系mutations

8.1.1 引入 mapMutations

// 引入 mapMutations
import { mapMutations } from 'vuex'

8.1.2 对象写法

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(n)">+</button>
    <button @click="decrement(n)">-</button>
    <button @click="incrementWait">等一等再加</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
  </div>
</template>
<script>
// 导入 mapState mapGetters
import { mapState, mapGetters } from 'vuex'
// 引入 mapMutations
import { mapMutations } from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n: 1
    }
  },
  computed: {
    ......
  },
  methods: {
    // 自己写的方法
    // increment() {
    //   this.$store.commit('INCREMENT', this.n)
    // },
    // decrement() {
    //   this.$store.commit('DECREMENT', this.n)
    // },
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    ...mapMutations({
      increment: 'INCREMENT',
      decrement: 'DECREMENT'
    }),
    // 生成的方法为：
    // increment(value) {
    //   this.$store.commit('INCREMENT', value)
    // },
    // 所以在调用mapMutations生成对应的方法时，需要传入value参数
    ......
  }
}
</script>

8.1.3 数组写法

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(n)">+</button>
    <button @click="DECREMENT(n)">-</button>
    <button @click="incrementWait">等一等再加</button>
    <button @click="incrementOdd">当前求和为奇数再加</button>
  </div>
</template>
<script>
// 导入 mapState mapGetters
import { mapState, mapGetters } from 'vuex'
// 引入 mapMutations
import { mapMutations } from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n: 1
    }
  },
  computed: {
    ......
  },
  methods: {
    // 自己写的方法
    // increment() {
    //   this.$store.commit('INCREMENT', this.n)
    // },
    // decrement() {
    //   this.$store.commit('DECREMENT', this.n)
    // },
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(对象写法)
    // ...mapMutations({
    //   increment: 'INCREMENT',
    //   decrement: 'DECREMENT'
    // }),
    // 借助mapMutations生成对应的方法，方法中会调用commit去联系mutations(数组写法)
    ...mapMutations(['INCREMENT', 'DECREMENT']),
    ......
  }
}
</script>
<style>
button {
  margin: 5px;
}
</style>

8.2 mapActions

mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数

借助mapActions生成对应的方法，方法中会调用dispatch去联系actions

8.2.1 引入 mapActions

// 引入 mapActions 
import { mapActions } from 'vuex'

8.2.2 对象写法

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(n)">+</button>
    <button @click="DECREMENT(n)">-</button>
    <button @click="incrementWait(n)">等一等再加</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
  </div>
</template>
<script>
// 导入 mapState mapGetters
import { mapState, mapGetters } from 'vuex'
// 引入 mapMutations
import { mapMutations, mapActions } from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n: 1
    }
  },
  computed: {
    ......
  },
  methods: {
    ......
    // 自己写的方法
    // incrementWait() {
    //   this.$store.dispatch('incrementWait', this.n)
    // },
    // incrementOdd() {
    //   this.$store.dispatch('incrementOdd', this.n)
    // }
    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
    ...mapActions({
      incrementWait: 'incrementWait',
      incrementOdd: 'incrementOdd'
    })
    // 生成的方法为：
    // incrementWait(value) {
    //   this.$store.dispatch('incrementWait', value)
    // },
    // 所以在调用mapActions生成对应的方法时，需要传入value参数
  }
}
</script>

8.2.3 数组写法

<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(n)">+</button>
    <button @click="DECREMENT(n)">-</button>
    <button @click="incrementWait(n)">等一等再加</button>
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
  </div>
</template>
<script>
// 导入 mapState mapGetters
import { mapState, mapGetters } from 'vuex'
// 引入 mapMutations
import { mapMutations, mapActions } from 'vuex'
export default {
  name: 'Count',
  data() {
    return {
      n: 1
    }
  },
  computed: {
    ......
  },
  methods: {
    ......
    // 自己写的方法
    // incrementWait() {
    //   this.$store.dispatch('incrementWait', this.n)
    // },
    // incrementOdd() {
    //   this.$store.dispatch('incrementOdd', this.n)
    // }
    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(对象写法)
    // ...mapActions({
    //   incrementWait: 'incrementWait',
    //   incrementOdd: 'incrementOdd'
    // })
    // 借助mapActions生成对应的方法，方法中会调用dispatch去联系actions(数组写法)
    ...mapActions(['incrementWait', 'incrementOdd'])
  }
}
</script>

9. vuex 总结

1.概念

在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。

2.何时使用？

多个组件需要共享数据时

3.搭建vuex环境

  1. 创建文件：src/store/index.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//应用Vuex插件
Vue.use(Vuex)
//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
//创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state
})
  1. 在main.js中创建vm时传入store配置项
......
//引入store
import store from './store'
......
//创建vm
new Vue({
  el:'#app',
  render: h => h(App),
  store
})

4.基本使用

  1. 初始化数据、配置actions、配置mutations，操作文件store.js
//引入Vue核心库
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//引用Vuex
Vue.use(Vuex)
const actions = {
    //响应组件中加的动作
  jia(context,value){
    // console.log('actions中的jia被调用了',miniStore,value)
    context.commit('JIA',value)
  },
}
const mutations = {
    //执行加
  JIA(state,value){
    // console.log('mutations中的JIA被调用了',state,value)
    state.sum += value
  }
}
//初始化数据
const state = {
   sum:0
}
//创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state,
})
  1. 组件中读取vuex中的数据：$store.state.sum
  2. 组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据)或 $store.commit('mutations中的方法名',数据)

备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit

5.getters的使用

  1. 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
  2. 在store.js中追加getters配置
......
const getters = {
  bigSum(state){
    return state.sum * 10
  }
}
//创建并暴露store
export default new Vuex.Store({
  ......
  getters
})
  1. 组件中读取数据：$store.getters.bigSum

6.四个map方法的使用

  1. mapState方法：用于帮助我们映射state中的数据为计算属性
computed: {
    //借助mapState生成计算属性：sum、school、subject（对象写法）
     ...mapState({sum:'sum',school:'school',subject:'subject'}),
    //借助mapState生成计算属性：sum、school、subject（数组写法）
    ...mapState(['sum','school','subject']),
},
  1. mapGetters方法：用于帮助我们映射getters中的数据为计算属性
computed: {
    //借助mapGetters生成计算属性：bigSum（对象写法）
    ...mapGetters({bigSum:'bigSum'}),
    //借助mapGetters生成计算属性：bigSum（数组写法）
    ...mapGetters(['bigSum'])
},
  1. mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
methods:{
    //靠mapActions生成：incrementOdd、incrementWait（对象形式）
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
    //靠mapActions生成：incrementOdd、incrementWait（数组形式）
    ...mapActions(['jiaOdd','jiaWait'])
}
  1. mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
methods:{
    //靠mapActions生成：increment、decrement（对象形式）
    ...mapMutations({increment:'JIA',decrement:'JIAN'}),
    //靠mapMutations生成：JIA、JIAN（对象形式）
    ...mapMutations(['JIA','JIAN']),
}

备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。


文章标签：
JavaScript
数据管理
关键词：
vuex VUE.js
vue vuex VUE.js
萤火虫的小尾巴
目录
相关文章
游客ady5kpv352g3u
|
4天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
游客ady5kpv352g3u
12 1
vue学习第四章
游客ady5kpv352g3u
|
4天前
|
JavaScript 前端开发
vue学习第九章(v-model)
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript与Vue的大一学生，自学前端2年半，正向全栈进发。此篇介绍v-model在不同表单元素中的应用及修饰符的使用，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
13 1
vue学习第九章(v-model)
游客ady5kpv352g3u
|
4天前
|
JavaScript 前端开发 开发者
vue学习第十章(组件开发）
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文深入讲解Vue组件的基本使用、全局与局部组件、父子组件通信及数据传递等内容，适合前端开发者学习参考。持续更新中，期待您的关注！🎉🎉🎉
游客ady5kpv352g3u
9 1
vue学习第十章(组件开发）
我是快乐的嘟嘟
|
10天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
94 26
html的七十二变
|
10天前
|
存储 缓存 JavaScript
在 Vue 中使用 computed 和 watch 时，性能问题探讨
本文探讨了在 Vue.js 中使用 computed 计算属性和 watch 监听器时可能遇到的性能问题，并提供了优化建议，帮助开发者提高应用性能。
html的七十二变
32 8
html的七十二变
|
10天前
|
存储 缓存 JavaScript
如何在大型 Vue 应用中有效地管理计算属性和侦听器
在大型 Vue 应用中，合理管理计算属性和侦听器是优化性能和维护性的关键。本文介绍了如何通过模块化、状态管理和避免冗余计算等方法，有效提升应用的响应性和可维护性。
html的七十二变
27 7
html的七十二变
|
10天前
|
存储 缓存 JavaScript
Vue 中 computed 和 watch 的差异
Vue 中的 `computed` 和 `watch` 都用于处理数据变化，但使用场景不同。`computed` 用于计算属性，依赖于其他数据自动更新；`watch` 用于监听数据变化，执行异步或复杂操作。
html的七十二变
30 5
游客ady5kpv352g3u
|
9天前
|
JavaScript 前端开发 UED
vue学习第二章
欢迎来到我的博客！我是一名自学了2年半前端的大一学生，熟悉JavaScript与Vue，目前正在向全栈方向发展。如果你从我的博客中有所收获，欢迎关注我，我将持续更新更多优质文章。你的支持是我最大的动力！🎉🎉🎉
游客ady5kpv352g3u
21 3
html的七十二变
|
11天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
29 5
游客ady5kpv352g3u
|
9天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，熟悉JavaScript与Vue，正向全栈方向发展。博客内容涵盖Vue基础、列表展示及计数器案例等，希望能对你有所帮助。关注我，持续更新中！🎉🎉🎉
游客ady5kpv352g3u
19 2

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    vue3的动态组件 component （点击顶部切换下面展示对应的组件内容）
  • 4
    自制简单的range（Vue）
  • 5
    Vue3中的jsx的简单体验，在vue3中使用jsx语法
  • 6
    vite原理之解析.vue文件
  • 7
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 8
    vue里怎么使用pdf.js实现pdf文件的预览功能
  • 9
    Vue报错Interpolation inside attributes has been removed.解决方法
  • 10
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 1
    vue代码优化方案
    57
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    143
  • 3
    在Vue中，子组件向父组件传递数据
    77
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    98
  • 5
    【vue3】vue3中路由hash与History的设置
    227
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1169
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    490
  • 8
    【vue】 vue2 监听滚动条滚动事件
    147
  • 9
    【天地图】vue 天地图 T is not defined
    182
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    648

    • 相关课程

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

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    无影云桌面