Vue2 第十九节 Vuex（二）

news2024/12/30 2:09:40

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
    }
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/835746.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

About Multiple regression

About Multiple regression

ps:this article is not very strict,just some ml and mathematic basic knowledge.My english is poor too.So If this passage make you confuse and uncomfortable.Please give me a feedback in the comment :-D Prior to this(在此之前), we learned the concept of sin…
阅读更多...
linuxARM裸机学习笔记（2）----汇编LED灯实验

linuxARM裸机学习笔记（2）----汇编LED灯实验

MX6ULL 的 IO IO的复用功能 这里的只使用了低五位&#xff0c;用来配置io口&#xff0c;其中bit0~bit3(MUX_MODE)就是设置 GPIO1_IO00 的复用功能的&#xff0c;GPIO1_IO00 一共可以复用为 9种功能 IO&#xff0c;分别对应 ALT0~ALT8。每种对应了不同的功能 io的属性配置 HY…
阅读更多...
优思学院｜精益生产如何真正落地？你要掌握这4个P！

优思学院｜精益生产如何真正落地？你要掌握这4个P！

怎样才能让精益生产的方法落地&#xff1f;这是一个经常听到的问题&#xff0c;但对于这个问题很多人有不同的想法和答法&#xff0c;因为大家对“落地”一词有着不同的看法。 “落地”是指整个管理系统的重组&#xff0c;是企业把所学的管理知识和方法&#xff0c;在经营实践…
阅读更多...
那些不想骑车的正常理由和十三不骑。

那些不想骑车的正常理由和十三不骑。

骑友们最热门&#xff0c;也是常常讨论的话题大多是如何骑自行车&#xff1f;但有时候&#xff0c;我们也会思考一些另类的问题。例如&#xff0c;那些不想骑车的理由。 首先&#xff0c;我们可以从科学角度来看待这个问题。骑车虽然有益于健康&#xff0c;但是骑车的姿势也会对…
阅读更多...
用msys2安装verilator并用spinal进行仿真

用msys2安装verilator并用spinal进行仿真

一 参考 SpinalHDL 开发环境搭建一步到位（图文版） - 极术社区 - 连接开发者与智能计算生态 (aijishu.com)https://aijishu.com/a/1060000000255643Setup and installation of Verilator — SpinalHDL documentation
阅读更多...
微信认证申请流程（政府/事业单位类型）

微信认证申请流程（政府/事业单位类型）

第一步&#xff1a;登录微信公众平台->设置->微信认证->开通 第二步&#xff1a;同意协议&#xff1a;签署《微信公众平台认证服务协议》 第三步&#xff1a;验证管理员 第四步&#xff1a;选择认证类型及填写认证资料 选择认证类型及上传申请公函 政府/事业单位资质…
阅读更多...
沙箱逃逸复现

沙箱逃逸复现

当this指向window 原理 1.this直接指向window&#xff0c;拿到window的tostring的constructor来利用构造函数拿到process 是对象且指向沙箱外部&#xff0c;才可以利用 const vm require(vm); const script const process this.toString.constructor(return process)() pr…
阅读更多...
vs code 如何配置保存cpolar所建立公共互联网网页的隧道参数？

vs code 如何配置保存cpolar所建立公共互联网网页的隧道参数？

文章目录 &#x1f4cb; 前言1.如何配置保存cpolar所建立的隧道参数&#xff1f;2.本地安装 VS Code并修改隧道参数2.1 Visual studio Code 下载2.2 配置Visual studio Code 相关参数2.3 编辑 cpolar.yml 隧道参数文件2.3 修改website隧道参数 3. 检查 cpolar.yml 文件配置是否…
阅读更多...
直播课 | 大橡科技研发总监丁端尘博士“类器官芯片技术在新药研发中的应用”

直播课 | 大橡科技研发总监丁端尘博士“类器官芯片技术在新药研发中的应用”

从类器官到类器官芯片&#xff0c;正在生物科学领域大放异彩。 药物研发需要新方法 众所周知&#xff0c;一款新药是一个风险大、周期长、成本高的艰难历程&#xff0c;国际上有一个传统的“双十”说法——10年时间&#xff0c;10亿美金&#xff0c;才可能成功研发出一款新药…
阅读更多...
前期自学Java之Arrays篇及JDK帮助文档的下载

前期自学Java之Arrays篇及JDK帮助文档的下载

Assays 数组的工具类java.util.Arrays 一. 数组的简介 由于数组对象本身并没有什么方法可以提供给我们调用&#xff0c;但API中提供了一个工具类Arrays供我们使用&#xff0c;从而可以对数组对象进行一些基本的操作 Arrays类中的方法都是static修饰的静态方法&#xff0c;在…
阅读更多...
Spring-1-透彻理解Spring XML的Bean创建--IOC

Spring-1-透彻理解Spring XML的Bean创建--IOC

学习目标 上一篇文章我们介绍了什么是Spring,以及Spring的一些核心概念&#xff0c;并且快速快发一个Spring项目&#xff0c;实现IOC和DI&#xff0c;今天具体来讲解IOC 能够说出IOC的基础配置和Bean作用域 了解Bean的生命周期 能够说出Bean的实例化方式 一、Bean的基础配置 …
阅读更多...
jenkins准备

jenkins准备

回到目录 jenkins是一个开源的、提供友好操作界面的持续集成(CI)工具&#xff0c;主要用于持续、自动的构建/测试软件项目、监控外部任务的运行。Jenkins用Java语言编写&#xff0c;可在Tomcat等流行的servlet容器中运行&#xff0c;也可独立运行。通常与版本管理工具(SCM)、构…
阅读更多...
项目中使用非默认字体

项目中使用非默认字体

项目场景&#xff1a; 由于开发需要&#xff0c;默认的字体不符合开发需求&#xff0c;有时候我们需要引入某种字体到项目中 解决方案&#xff1a; 首先需要下载或引入字体包 然后创建一个 index.css 文件用于声明引入字体名称 font-face {font-family: "YouSheBiao…
阅读更多...
用html+javascript打造公文一键排版系统13：增加半角字符和全角字符的相互转换功能

用html+javascript打造公文一键排版系统13：增加半角字符和全角字符的相互转换功能

一、实践发现了bug和不足 今天用了公文一键排版系统对几个PDF文件格式的材料进行文字识别后再重新排版&#xff0c;处理效果还是相当不错的&#xff0c;节约了不少的时间。 但是也发现了三个需要改进的地方&#xff1a; &#xff08;一&#xff09;发现了两个bug&#xff1a…
阅读更多...
一起学算法（滑动窗口篇）

一起学算法（滑动窗口篇）

前言&#xff1a; 对于滑动窗口&#xff0c;有长度固定的窗口&#xff0c;也有长度可变的窗口&#xff0c;一般是基于数组进行求解&#xff0c;对于一个数组中两个相邻的窗口&#xff0c;势必会有一大部分重叠&#xff0c;这部分重叠的内容是不需要重复计算的&#xff0c;所以我…
阅读更多...
Nacos适配人大金仓国产数据库

Nacos适配人大金仓国产数据库

nacos版本2.2.0 人大金仓版本8.6.0 一、相关文件 Nacos官方文档-数据源插件https://nacos.io/zh-cn/docs/v2/plugin/datasource-plugin.html Nacos2.2.0源码https://github.com/alibaba/nacos/archive/refs/tags/2.2.0.zip 人大金仓驱动https://download.csdn.net/download/q…
阅读更多...
无人机航测技术有何特点？主要应用在哪些方面?

无人机航测技术有何特点？主要应用在哪些方面?

无人机航测是航空摄影测量的一种&#xff0c;主要面向低空遥感领域&#xff0c;具有成本低、快速高效、适用范围广等特点。目前&#xff0c;无人机航测主要应用于地形测绘、城市数字化建设、工程建设等方面。 无人机航测技术的特点 1、作业成本低 传统的人工测量技术主要利用…
阅读更多...
Bigemap如何查看高清影像图

Bigemap如何查看高清影像图

工具 Bigemap gis office地图软件 分享一个可以查看非常高清影像图的软件&#xff0c;平时外出徒步的时候用来查看路线。 首先要去搜索安装bigemap gis office这个软件&#xff0c;打开软件&#xff0c;要提示你去添加地图的。然后去点击选择地图这个按钮&#xff0c;列表中有…
阅读更多...
CobaltStirke BOF技术剖析（一）｜BOF实现源码级分析

CobaltStirke BOF技术剖析（一）｜BOF实现源码级分析

简介 对BOF(Beacon Object File)的支持是在CobaltStrike4.1版本中新引入的功能。BOF文件是由c代码编译而来的可在Beacon进程中动态加载执行的二进制程序。无文件执行与无新进程创建的特性更加符合OPSEC的原则&#xff0c;适用于严苛的终端对抗场景。低开发门槛与便利的内部Bea…
阅读更多...
Linux学习之延时计划任务anacontab和锁文件flock

Linux学习之延时计划任务anacontab和锁文件flock

cat /etc/redhat-release看到操作系统的版本是CentOS Linux release 7.6.1810 (Core)&#xff0c;uname -r可以看到内核版本是3.10.0-957.21.3.el7.x86_64 参考的博客有&#xff1a; 1.《Linux anacron命令用法详解》 2.《详解anacron 命令》 3.《Anacron的用法》 4.《shell脚…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023