Vue2 第十九节 Vuex（二）

已于 2023-08-04 13:47:32 修改
阅读量121 收藏
点赞数
分类专栏： 前端学习 Vue 文章标签： 前端 开发语言
于 2023-08-04 13:45:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenjieyujiayou/article/details/132098809
版权

1.Vuex API 补充内容

2.getters 配置项

3.四个Map方法的使用

4.多组件共享数据

5.Vux模块化和命名空间

一.Vuex API补充内容

① 在actions中，如果一个函数处理不完，可以继续调dispatch处理

 ② 开发者工具是跟mutations中的数据进行交互的，所以数据处理最好写在mutations中

二. getters 配置项

① 用于将state中的数据进行加工 

② 使用

③ 结果展示

 三. 四个Map方法的使用

引入：import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

3.1  mapState

① mapState是Vue帮我们映射state中的数据为计算属性

② 映射state中的数据为计算属性

  • mapState得到的是一个对象，...把这个对象展开
  • 对象写法和数组写法两种方式
  • 对象写法：属性名代表在模板中使用的名字，属性值代表在state中的数据
...mapState({ he: 'sum', xuexiao: 'school', xueke: 'subject' })

  • 数组写法：模板的数据和state中的数据名相同时使用这种写法
...mapState(['sum', 'school', 'subject'])

 

 3.2 mapGetters

① mapGetters 是Vue帮助我们映射getter中的数据为计算属性

② 映射getter中的数据为计算属性

  • 对象写法
...mapGetters({ bigSum: 'bigSum' })
  •  数组写法
...mapGetters(['bigSum'])

在模板中的使用

 3.3 mapActions

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

  • 对象写法
...mapActions({ incrementOdd: 'addOdd', incrementWait: 'addWait' })
  • 模板中调用

  • 数组写法
...mapActions(['addOdd', 'addWait'])
  • 模板中调用

3.4 mapMutations

借助mapMutations对应的方法，方法中调用commit去联系mutation

  • 对象写法
...mapMutations({ increment: 'ADD', decrement: 'MINUS' })
  • 模板中调用 

  •  数组写法
...mapMutations(['ADD', 'MINUS'])
  • 模板中调用

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

 四.多组件共享数据

① 代码详情

Count.vue

<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <h2>当前求和放大10倍为{{ bigSum }}</h2>
    <h3>我在{{ school }}学习{{ subject }}</h3>
    <h3 style="color: red">Person组件的总人数是{{ personList.length }}</h3>
    <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="ADD(n)">+</button>
    <button @click="MINUS(n)">-</button>
    <!-- <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button> -->
    <button @click="addOdd(n)">当前求和为奇数再加</button>
    <button @click="addWait(n)">等一等再加</button>
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Count',
  data () {
    return {
      n: 1, // 用户选择的数字
    }
  },
  computed: {
    // 帮助我们映射state中的数据为计算属性
    // ...mapState({ sum: 'sum', school: 'school', subject: 'subject' })
    ...mapState(['sum', 'school', 'subject', 'personList']),
    // 帮助我们映射getter中的数据为计算属性
    // ...mapGetters({ bigSum: 'bigSum' })
    ...mapGetters(['bigSum'])
  },
  methods: {
    // 借助mapMutations 生成对应的方法，方法中调用commit去联系mutation(对象写法)
    // ...mapMutations({ increment: 'ADD', decrement: 'MINUS' }),
    // 借助mapMutations 生成对应的方法，方法中调用commit去联系mutation(数组写法)
    ...mapMutations(['ADD', 'MINUS']),
    // 借助mapActions 生成对应的方法，方法中调用 dispatch 去联系mutation (对象写法)
    // ...mapActions({ incrementOdd: 'addOdd', incrementWait: 'addWait' })
    // 借助mapActions 生成对应的方法，方法中调用 dispatch 去联系mutation (数组写法)
    ...mapActions(['addOdd', 'addWait'])
  },
  mounted () {
  },
}
</script>

<style scoped>
</style>

Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red">Count组件求和为:{{ sum }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { nanoid } from 'nanoid'
export default {
  name: 'Person',
  data () {
    return {
      name: ''
    }
  },
  computed: {
    personList () {
      return this.$store.state.personList
    },
    sum () {
      return this.$store.state.sum
    }
  },
  methods: {
    add () {
      const obj = { id: nanoid(), name: this.name }
      this.$store.commit('ADD_PERSON', obj)
      this.name = ''
    }
  },
}
</script>

<style>
</style>

 App.vue

<template>
  <div>
    <Count />
    <hr />
    <Person />
  </div>
</template>

<script>
import Count from './components/Count'
import Person from './components/Person'
export default {
  name: 'App',
  components: { Count, Person },
  mounted () {
    console.log('App', this)
  }
}
// 如果本地存在就会直接从本地拿，不会去请求代理服务器
</script>
<style>
button {
  margin-left: 10px;
}
</style>

store/index.js

// 该文件用于创建Vuex中的store
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
// 使用Vuex
Vue.use(Vuex)
// 1.actions用于响应组件中的动作
const actions = {
  // add (context, value) {
  //   context.commit('ADD', value)
  // },
  // minus (context, value) {
  //   context.commit('MINUS', value)
  // },
  addOdd (context, value) {
    if (context.state.sum % 2) {
      context.commit('ADD', value)
    }
  },
  addWait (context, value) {
    setTimeout(() => {
      context.commit('ADD', value)
    }, 500)
  }
}
// 用于将state的数据进行加工
// 当state中的数据需要经过加工再使用时，可以使用getters加工
const getters = {
  bigSum (state) {
    return state.sum * 10
  }
}

// 2.mutations 用于操作数据(state)
// mutations里面的方法最好是大写的
const mutations = {
  ADD (state, value) {
    state.sum += value
  },
  MINUS (state, value) {
    state.sum -= value
  },
  ADD_PERSON (state, value) {
    state.personList.unshift(value)
  }

}

// 3.state用于存储数据
const state = {
  sum: 0,
  school: '尚硅谷',
  subject: '前端',
  personList: [
    { id: '001', name: '张三' }
  ]
}

// 创建并暴露store
export default new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})

共享体现在哪里

① 在Count.vue中可以使用person的数据 

② person里面使用count的数据

 五. Vuex模块化和命名空间

5.1 Vuex模块化

① 分模块进行编程:每个模块负责自己模块的数据

② 这个名字可以随便起

③ 引入modules配置项 

 ④ 使用

  • count.vue中使用

 如果要使用下面的方式取模块中的数据或者调用模块中的方法，就需要在对应的store管理文件中开启命名空间，调用的时候在前面声明调用哪个模块的方法

  •  person.vue中使用 

（1）取数据：

（2）调用commit和dispatch方法的时候使用 / 的形式

（3） 使用getters取数据

 5.2 所有模块化代码

① 文件目录

② Count.vue

<template>
  <div>
    <h1>当前求和为{{ sum }}</h1>
    <h2>当前求和放大10倍为{{ bigSum }}</h2>
    <h3>我在{{ school }}学习{{ subject }}</h3>
    <h3 style="color: red">Person组件的总人数是{{ personList.length }}</h3>
    <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="ADD(n)">+</button>
    <button @click="MINUS(n)">-</button> -->
    <button @click="incrementOdd(n)">当前求和为奇数再加</button>
    <button @click="incrementWait(n)">等一等再加</button>
    <!-- <button @click="addOdd(n)">当前求和为奇数再加</button>
    <button @click="addWait(n)">等一等再加</button> -->
  </div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Count',
  data () {
    return {
      n: 1, // 用户选择的数字
    }
  },
  computed: {
    // 帮助我们映射state中的数据为计算属性
    // ...mapState({ sum: 'sum', school: 'school', subject: 'subject' })
    ...mapState('countAbout', ['sum', 'school', 'subject']),
    ...mapState('personAbout', ['personList']),
    // 帮助我们映射getter中的数据为计算属性
    // ...mapGetters('countAbout', { bigSum: 'bigSum' })
    ...mapGetters('countAbout', ['bigSum'])
  },
  methods: {
    // 借助mapMutations 生成对应的方法，方法中调用commit去联系mutation(对象写法)
    ...mapMutations('countAbout', { increment: 'ADD', decrement: 'MINUS' }),

    // 借助mapMutations 生成对应的方法，方法中调用commit去联系mutation(数组写法)
    // ...mapMutations(['ADD', 'MINUS']),
    // ***********************************//
    // incrementOdd () {
    //   this.$store.dispatch('addOdd', this.n)
    // },
    // incrementWait () {
    //   this.$store.dispatch('addWait', this.n)
    // }
    // 借助mapActions 生成对应的方法，方法中调用 dispatch 去联系mutation (对象写法)
    ...mapActions('countAbout', { incrementOdd: 'addOdd', incrementWait: 'addWait' })
    // 借助mapActions 生成对应的方法，方法中调用 dispatch 去联系mutation (数组写法)
    // ...mapActions(['addOdd', 'addWait'])
  },
  mounted () {

  },
}
</script>

<style scoped>
</style>

 ③ Person.vue

<template>
  <div>
    <h1>人员列表</h1>
    <h3 style="color: red">Count组件求和为:{{ sum }}</h3>
    <h3>列表中第一个人的名字是{{ firstPersonName }}</h3>
    <input type="text" placeholder="请输入名字" v-model="name" />
    <button @click="add">添加</button>
    <button @click="addWang">添加一个姓王的人</button>
    <button @click="addPersonServer">添加来自服务器的人</button>
    <ul>
      <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { nanoid } from 'nanoid'
export default {
  name: 'Person',
  data () {
    return {
      name: ''
    }
  },
  computed: {
    personList () {
      return this.$store.state.personAbout.personList
    },
    sum () {
      return this.$store.state.countAbout.sum
    },
    firstPersonName () {
      return this.$store.getters['personAbout/firstPersonName']
    }
  },
  methods: {
    add () {
      const obj = { id: nanoid(), name: this.name }
      this.$store.commit('personAbout/ADD_PERSON', obj)
      this.name = ''
    },
    addWang () {
      const obj = { id: nanoid(), name: this.name }
      this.$store.dispatch('personAbout/addPersonWang', obj)
      this.name = ''
    },
    addPersonServer () {
      this.$store.dispatch('personAbout/addPersonServer')
    }
  },
}
</script>

<style>
</style>

④  App.vue

<template>
  <div>
    <Count />
    <hr />
    <Person />
  </div>
</template>

<script>
import Count from './components/Count'
import Person from './components/Person'
export default {
  name: 'App',
  components: { Count, Person },
  mounted () {
    console.log('App', this)
  }
}
// 如果本地存在就会直接从本地拿，不会去请求代理服务器
</script>
<style>
button {
  margin-left: 10px;
}
</style>

⑤  count.js

export default {
  namespaced: true,
  actions: {
    addOdd (context, value) {
      if (context.state.sum % 2) {
        context.commit('ADD', value)
      }
    },
    addWait (context, value) {
      setTimeout(() => {
        context.commit('ADD', value)
      }, 500)
    }
  },
  mutations: {
    ADD (state, value) {
      state.sum += value
    },
    MINUS (state, value) {
      state.sum -= value
    },
  },
  state: {
    sum: 0,
    school: '尚硅谷',
    subject: '前端'
  },
  getters: {
    bigSum (state) {
      return state.sum * 10
    }
  }
}

⑥  index.js

// 该文件用于创建Vuex中的store
import Vue from 'vue'
// 引入Vuex
import Vuex from 'vuex'
import personOptions from './person'
import countOptions from './count'
// 使用Vuex
Vue.use(Vuex)

// 求和相关配置


// 人员管理相关的配置
export default new Vuex.Store({
  modules: {
    countAbout: countOptions,
    personAbout: personOptions
  }
})

⑦  person.js

import axios from "axios"
import { nanoid } from "nanoid"
export default {
  namespaced: true,
  actions: {
    addPersonWang (context, value) {
      if (value.name.indexOf('王') === 0) {
        context.commit('ADD_PERSON', value)
      } else {
        alert('添加的人必须姓王')
      }
    },
    addPersonServer (context) {
      axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
        response => {
          context.commit('ADD_PERSON', { id: nanoid(), name: response.data })
        },
        error => {
          alert(error.message)
        }
      )
    }
  },
  mutations: {
    ADD_PERSON (state, value) {
      state.personList.unshift(value)
    }
  },
  state: {
    personList: [
      { id: '001', name: '张三' }
    ]
  },
  getters: {
    firstPersonName (state) {
      return state.personList[0].name
    }
  }
}

pa_miao_chi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue02 state与mapState，附架构师必备技术详解
2401_83739951的博客
03-21 661
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包。
Cloud-Music：网易云音乐Vue版本，Vue + Vuex + Webpack2 + Vue-路由器
02-06
其中3000端口用于启动网易云音乐节点Api服务，8080是为了承载页面（感谢提供API接口的作者 ）更新日志1.0.1 | 2017.9.19入门了第一期功能代码，Vuex重新管理整个应用程序的商店，完成部分专辑页面和歌手页面的功能...
Vue2：Vuex中使用mapMutations和mapActions
Brave_heart4pzj的博客
02-18 611
Vue
Vue2中的mapState和mapGetters和mapActions和mapMutations
weixin_44685106的博客
04-30 564
在App.js中,通过 $store.commit() 将方法回调名,以及数据,直接传给mutations对象,在mutations对象中写方法回调,将数据进行处理使用。由于已经引入Vuex,所以在this中会有$store方法, store方法中存在 commit,dispatch,getters,state等属性具体属性见下图。并且在其中进行逻辑运算,然后再通过 context.commit('大写方法名区别actions中的方法',value)方法名(context,value){
Vue2：Vuex中使用mapState和mapGetters
Brave_heart4pzj的博客
02-18 504
Vue
【Vue2+3入门到实战】（20）VUE之Vuex状态管理器辅助函数mapMutations module模块 state getters mutations actions方法 代码实现详细讲解
shenchengyv的博客
01-02 1613
mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入,但是请注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中.state是存放数据的，mutations是同步更新数据 (便于监测数据的变化, 更新视图等, 方便于调试工具查看变化)
【Vue小程序】商城开发 第四节 上
12-24
在本节"【Vue小程序】商城开发 第四节 上"中，我们将深入探讨使用Vue.js技术构建微信小程序商城的关键技术和实践。Vue.js是一款轻量级的前端JavaScript框架，以其易用性和灵活性深受开发者喜爱，而将其应用于微信小...
vue2 2017重制版
08-07
Vue 2.0提供了内置的过渡系统，通过CSS过渡和动画，或者使用第三方库如Animate.css，可以轻松添加进入/离开的过渡效果。 十一、服务端渲染（SSR） Vue 2.0引入了服务器端渲染功能，提高了SEO友好性和首屏加载速度。...
Vue-第3章 Vue 基础精讲
07-29
Vue推荐使用Vuex进行集中式的状态管理，它提供了一种有序的方式来管理组件间的共享状态，并遵循特定的设计原则，如单一状态树、纯函数式变更等。 八、路由管理 Vue Router是官方的路由库，用于实现前端路由，实现...
vue-devtools
12-15
4. **调试Vue插件和库**：Vue DevTools也能帮助调试与Vue集成的第三方库或自定义插件。 5. **查看Vuex状态**：如果项目使用了Vuex状态管理，可以在Vuex面板中查看和修改全局状态。 6. **时间旅行调试**：记录并回放...
Vue02 state与mapState
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
11-22 3902
！！！ 这个例子可以先忽略mutations 初始化一个state const store = new Vuex.Store({ state: { name: "old name", age: 18, sex: "女", }, mutations: { changName(state) { ...
vue2知识点：vuex中四个map方法的使用，包括：mapState、mapGetters、mapMutations、mapActions
刘大猫
06-29 1596
vue2知识点：vuex中四个map方法的使用
Vue2.0 Vuex 便于编写的功能mapState、mapGetters、mapActions、mapMutation
yasinawolaopo的博客
01-06 1477
主要还是Vuex里的mapState、mapGetters、mapActions、mapMutation
vuex中如何使用mapState函数(vue2/vue3使用方法)
stay hungry, stay foolish
06-10 7890
通过...运算符进行结构，将store中的state进行映射。在template中可以直接使用，不需要通过`this.$store.state`一个个获取store中的state数据。 在vuex中可以导出改函数。
Android项目入口页面设置
最新发布
2401_84446919的博客
04-28 471
项目中：AndroidManifest.xml中此段代码 放置在哪个activity标签中 则哪个activity为入口。11，transform、translate、transition 分别是什么属性？14，对前端性能优化有什么了解？13，javascript 的垃圾回收机制讲一下,6，DOM 事件有哪些阶段？5，两栏布局，左边固定，右边自适应，左右不重叠。10，ES6 的 class 和构造函数的区别。2，如何实现一个最大的正方形。3，一行水平居中，多行居左。1，判断 js 类型的方式。
Vue2知识点(下)
weixin_69966934的博客
10-07 1361
Vue2知识点下半部分
Vue知识点整理（五）- vuex（2）- getters配置项、mapState与 mapGetters、mapActions与mapMutations、多组件共享数据
JHY97的博客
04-24 3098
一、getters配置项 1. 概念：当state中的数据需要经过加工后在使用时，可以使用getters加工 2. 在store.js中追加getters配置： ... // 准备getters - 用于将state中的数据进行加工 const getters = { 自定义命名(state){ return ...... } } // 创建并暴露store export default new Vuex.Store({ ... getters })
vue2学习笔记一、根据环境改变常量、vuex中mapGetters只能在组件created之后使用
peade的博客
12-31 6347
1、根据改变常量 我们在开发和生产环境下，ajax请求的地址是不一样的。在打包的时候，要把开发的ajax地址替换为生产的ajax地址。 可以去改变config/dev.env.js ， config/prod.env.js 这两个文件，分别在这两个文件里加上ajax地址。这两个js文件里的值，实际上是设置了process.env的值。 例如：dev.env.js   'use stri...
vuex当中mapGetters使用
梨子社区
08-18 488
vuex当中mapGetters使用
vue2vuex和vue3vuex区别
09-16
Vue2和Vue3在使用Vuex上有一些区别。 1. 语法：Vue2使用较为传统的选项API来使用Vuex，而Vue3推荐使用更现代的组合式API。Vue3中可以使用`useStore`函数来获取vuex实例，而不再需要使用`$store`属性。 2. 模块化：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值