Vue2向Vue3过度Vuex核心概念module模块

news2024/11/15 11:10:00

目录

    • 1 核心概念 - module
      • 1.目标
      • 2.问题
      • 3.模块定义 - 准备 state
    • 2 获取模块内的state数据
      • 1.目标：
      • 2.使用模块中的数据
      • 3.代码示例
    • 3 获取模块内的getters数据
      • 1.目标：
      • 2.语法：
      • 3.代码演示
    • 4 获取模块内的mutations方法
      • 1.目标：
      • 2.注意：
      • 3.调用方式：
      • 4.代码实现
    • 5 获取模块内的actions方法
      • 1.目标：
      • 2.注意：
      • 3.调用语法：
      • 4.代码实现
    • 6 Vuex模块化的使用小结
      • 1.直接使用
      • 2.借助辅助方法使用
    • 7 综合案例 - 创建项目
    • 8 综合案例-构建vuex-cart模块
    • 9 综合案例-准备后端接口服务环境
    • 10 综合案例-请求动态渲染数据
      • 1.目标
    • 11 综合案例-修改数量
    • 12 综合案例-底部总价展示

1 核心概念 - module

在这里插入图片描述

1.目标

掌握核心概念 module 模块的创建

2.问题

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

这句话的意思是，如果把所有的状态都放在state中，当项目变得越来越大的时候，Vuex会变得越来越难以维护

由此，又有了Vuex的模块化

在这里插入图片描述

3.模块定义 - 准备 state

定义两个模块 user 和 setting

user中管理用户的信息状态 userInfo modules/user.js

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  }
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

setting中管理项目应用的 主题色 theme，描述 desc， modules/setting.js

const state = {
  theme: 'dark'
  desc: '描述真呀真不错'
}

const mutations = {}

const actions = {}

const getters = {}

export default {
  state,
  mutations,
  actions,
  getters
}

在store/index.js文件中的modules配置项中，注册这两个模块

import user from './modules/user'
import setting from './modules/setting'

const store = new Vuex.Store({
    modules:{
        user,
        setting
    }
})

使用模块中的数据, 可以直接通过模块名访问 $store.state.模块名.xxx => $store.state.setting.desc

也可以通过 mapState 映射

2 获取模块内的state数据

1.目标：

掌握模块中 state 的访问语法

尽管已经分模块了，但其实子模块的状态，还是会挂到根级别的 state 中，属性名就是模块名

在这里插入图片描述

2.使用模块中的数据

  1. 直接通过模块名访问 $store.state.模块名.xxx
  2. 通过 mapState 映射：
    1. 默认根级别的映射 mapState([ ‘xxx’ ])
    2. 子模块的映射 ：mapState(‘模块名’, [‘xxx’]) - 需要开启命名空间 namespaced:true

modules/user.js

const state = {
  userInfo: {
    name: 'zs',
    age: 18
  },
  myMsg: '我的数据'
}

const mutations = {
  updateMsg (state, msg) {
    state.myMsg = msg
  }
}

const actions = {}

const getters = {}

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

3.代码示例

$store直接访问

$store.state.user.userInfo.name

mapState辅助函数访问

...mapState('user', ['userInfo']),
...mapState('setting', ['theme', 'desc']),

3 获取模块内的getters数据

1.目标：

掌握模块中 getters 的访问语

2.语法：

使用模块中 getters 中的数据：

  1. 直接通过模块名访问 $store.getters['模块名/xxx ']
  2. 通过 mapGetters 映射
    1. 默认根级别的映射 mapGetters([ 'xxx' ])
    2. 子模块的映射 mapGetters('模块名', ['xxx']) - 需要开启命名空间

3.代码演示

modules/user.js

const getters = {
  // 分模块后，state指代子模块的state
  UpperCaseName (state) {
    return state.userInfo.name.toUpperCase()
  }
}

Son1.vue 直接访问getters

<!-- 测试访问模块中的getters - 原生 -->
<div>{{ $store.getters['user/UpperCaseName'] }}</div>

Son2.vue 通过命名空间访问

computed:{
  ...mapGetters('user', ['UpperCaseName'])
}

4 获取模块内的mutations方法

1.目标：

掌握模块中 mutation 的调用语法

2.注意：

默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

3.调用方式：

  1. 直接通过 store 调用 $store.commit('模块名/xxx ', 额外参数)
  2. 通过 mapMutations 映射
    1. 默认根级别的映射 mapMutations([ ‘xxx’ ])
    2. 子模块的映射 mapMutations(‘模块名’, [‘xxx’]) - 需要开启命名空间

4.代码实现

modules/user.js

const mutations = {
  setUser (state, newUserInfo) {
    state.userInfo = newUserInfo
  }
}

modules/setting.js

const mutations = {
  setTheme (state, newTheme) {
    state.theme = newTheme
  }
}

Son1.vue

<button @click="updateUser">更新个人信息</button> 
<button @click="updateTheme">更新主题色</button>


export default {
  methods: {
    updateUser () {
      // $store.commit('模块名/mutation名', 额外传参)
      this.$store.commit('user/setUser', {
        name: 'xiaowang',
        age: 25
      })
    }, 
    updateTheme () {
      this.$store.commit('setting/setTheme', 'pink')
    }
  }
}

Son2.vue

<button @click="setUser({ name: 'xiaoli', age: 80 })">更新个人信息</button>
<button @click="setTheme('skyblue')">更新主题</button>

methods:{
// 分模块的映射
...mapMutations('setting', ['setTheme']),
...mapMutations('user', ['setUser']),
}

5 获取模块内的actions方法

1.目标：

掌握模块中 action 的调用语法 (同理 - 直接类比 mutation 即可)

2.注意：

默认模块中的 mutation 和 actions 会被挂载到全局，需要开启命名空间，才会挂载到子模块。

3.调用语法：

  1. 直接通过 store 调用 $store.dispatch('模块名/xxx ', 额外参数)
  2. 通过 mapActions 映射
    1. 默认根级别的映射 mapActions([ ‘xxx’ ])
    2. 子模块的映射 mapActions(‘模块名’, [‘xxx’]) - 需要开启命名空间

4.代码实现

需求：

在这里插入图片描述

modules/user.js

const actions = {
  setUserSecond (context, newUserInfo) {
    // 将异步在action中进行封装
    setTimeout(() => {
      // 调用mutation   context上下文，默认提交的就是自己模块的action和mutation
      context.commit('setUser', newUserInfo)
    }, 1000)
  }
}

Son1.vue 直接通过store调用

<button @click="updateUser2">一秒后更新信息</button>

methods:{
    updateUser2 () {
      // 调用action dispatch
      this.$store.dispatch('user/setUserSecond', {
        name: 'xiaohong',
        age: 28
      })
    },
}

Son2.vue mapActions映射

<button @click="setUserSecond({ name: 'xiaoli', age: 80 })">一秒后更新信息</button>

methods:{
  ...mapActions('user', ['setUserSecond'])
}

6 Vuex模块化的使用小结

1.直接使用

  1. state --> $store.state.模块名.数据项名
  2. getters --> $store.getters[‘模块名/属性名’]
  3. mutations --> $store.commit(‘模块名/方法名’, 其他参数)
  4. actions --> $store.dispatch(‘模块名/方法名’, 其他参数)

2.借助辅助方法使用

1.import { mapXxxx, mapXxx } from ‘vuex’

computed、methods: {

​ // …mapState、…mapGetters放computed中；

​ // …mapMutations、…mapActions放methods中；

​ …mapXxxx(‘模块名’, [‘数据项|方法’]),

​ …mapXxxx(‘模块名’, { 新的名字: 原来的名字 }),

}

2.组件中直接使用 属性 {{ age }} 或 方法 @click="updateAge(2)"

7 综合案例 - 创建项目

  1. 脚手架新建项目 (注意：勾选vuex)

    版本说明：

    vue2 vue-router3 vuex3

    vue3 vue-router4 vuex4/pinia

vue create vue-cart-demo
  1. 将原本src内容清空，替换成教学资料的《vuex-cart-准备代码》

在这里插入图片描述

需求：

  1. 发请求动态渲染购物车，数据存vuex （存cart模块， 将来还会有user模块，article模块…）
  2. 数字框可以修改数据
  3. 动态计算总价和总数量

8 综合案例-构建vuex-cart模块

  1. 新建 store/modules/cart.js
export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  },
}
  1. 挂载到 vuex 仓库上 store/cart.js
import Vuex from 'vuex'
import Vue from 'vue'

import cart from './modules/cart'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    cart
  }
})

export default store

9 综合案例-准备后端接口服务环境

  1. 安装全局工具 json-server （全局工具仅需要安装一次）
yarn global add json-server 或 npm i json-server  -g
  1. 代码根目录新建一个 db 目录
  2. 将资料 index.json 移入 db 目录
  3. 进入 db 目录，执行命令，启动后端接口服务 (使用–watch 参数 可以实时监听 json 文件的修改)
json-server  --watch  index.json

10 综合案例-请求动态渲染数据

1.目标

请求获取数据存入 vuex, 映射渲染

在这里插入图片描述

  1. 安装 axios
yarn add axios
  1. 准备actions 和 mutations
import axios from 'axios'

export default {
  namespaced: true,
  state () {
    return {
      list: []
    }
  },
  mutations: {
    updateList (state, payload) {
      state.list = payload
    }
  },
  actions: {
    async getList (ctx) {
      const res = await axios.get('http://localhost:3000/cart')
      ctx.commit('updateList', res.data)
    }
  }
}
  1. App.vue页面中调用 action, 获取数据
import { mapState } from 'vuex'

export default {
  name: 'App',
  components: {
    CartHeader,
    CartFooter,
    CartItem
  },
  created () {
    this.$store.dispatch('cart/getList')
  },
  computed: {
    ...mapState('cart', ['list'])
  }
}
  1. 动态渲染
<!-- 商品 Item 项组件 -->
<cart-item v-for="item in list" :key="item.id" :item="item"></cart-item>

cart-item.vue

<template>
  <div class="goods-container">
    <!-- 左侧图片区域 -->
    <div class="left">
      <img :src="item.thumb" class="avatar" alt="">
    </div>
    <!-- 右侧商品区域 -->
    <div class="right">
      <!-- 标题 -->
      <div class="title">{{item.name}}</div>
      <div class="info">
        <!-- 单价 -->
        <span class="price">￥{{item.price}}</span>
        <div class="btns">
          <!-- 按钮区域 -->
          <button class="btn btn-light">-</button>
          <span class="count">{{item.count}}</span>
          <button class="btn btn-light">+</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartItem',
  props: {
    item: Object
  },
  methods: {

  }
}
</script>

11 综合案例-修改数量

在这里插入图片描述

  1. 注册点击事件
<!-- 按钮区域 -->
<button class="btn btn-light" @click="onBtnClick(-1)">-</button>
<span class="count">{{item.count}}</span>
<button class="btn btn-light" @click="onBtnClick(1)">+</button>
  1. 页面中dispatch action
onBtnClick (step) {
  const newCount = this.item.count + step
  if (newCount < 1) return

  // 发送修改数量请求
  this.$store.dispatch('cart/updateCount', {
    id: this.item.id,
    count: newCount
  })
}
  1. 提供action函数
async updateCount (ctx, payload) {
  await axios.patch('http://localhost:3000/cart/' + payload.id, {
    count: payload.count
  })
  ctx.commit('updateCount', payload)
}
  1. 提供mutation处理函数
mutations: {
  ...,
  updateCount (state, payload) {
    const goods = state.list.find((item) => item.id === payload.id)
    goods.count = payload.count
  }
},

12 综合案例-底部总价展示

  1. 提供getters
getters: {
  total(state) {
    return state.list.reduce((p, c) => p + c.count, 0);
  },
  totalPrice (state) {
    return state.list.reduce((p, c) => p + c.count * c.price, 0);
  },
},
  1. 动态渲染
<template>
  <div class="footer-container">
    <!-- 中间的合计 -->
    <div>
      <span>共 {{total}} 件商品，合计：</span>
      <span class="price">￥{{totalPrice}}</span>
    </div>
    <!-- 右侧结算按钮 -->
    <button class="btn btn-success btn-settle">结算</button>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'CartFooter',
  computed: {
    ...mapGetters('cart', ['total', 'totalPrice'])
  }
}
</script>

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

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

相关文章

js实现数据关联查找更新。数据求和验证

js实现数据关联查找更新。数据求和验证

为了实现这个功能我们和后端定义了数据结构 data:{id&#xff1a;‘’&#xff0c;formInfo:,formInfo2:,formInfo3:,formInfo4:, ......deailData:[ // 明细数据 // saleData 查询带出的对应明细序列号数据{ id:, ocopyId:, copyId:, odoId:, ......, saleData:[ { id:, oc…
阅读更多...
unity-AI自动导航

unity-AI自动导航

unity-AI自动导航 给人物导航 一.地形创建 1.首先我们在Hierarchy面板中创建一个地形对象terrian&#xff0c;自行设定地形外貌&#xff0c;此时我们设置一个如下的地形外观。 二.创建导航系统 1.在主人公的Inspector、面板中添加Nav Mesh Agent &#xff08;导航网格代理&…
阅读更多...
【Linux】手把手教你实现udp服务器

【Linux】手把手教你实现udp服务器

网络套接字~ 文章目录 前言一、udp服务器的实现总结 前言 上一篇文章中我们讲到了很多的网络名词以及相关知识&#xff0c;下面我们就直接进入udp服务器的实现。 一、udp服务器的实现 首先我们需要创建五个文件(文件名可以自己命名也可以和我一样)&#xff0c;分别是makefile…
阅读更多...
Unity3d C#实现调取网络时间限制程序的体验时长的功能

Unity3d C#实现调取网络时间限制程序的体验时长的功能

前言 如题的需求应该经常在开发被提到&#xff0c;例如给客户体验3–5天的程序&#xff0c;到期后使其不可使用&#xff0c;或者几年的使用期限。这个功能常常需要使用到usb加密狗来限制&#xff0c;当然这也的话就需要一定的硬件投入。很多临时提供的版本基本是要求软件来实现…
阅读更多...
Java如何将jar包上传到Maven中央仓库（超详细2023最新版）

Java如何将jar包上传到Maven中央仓库（超详细2023最新版）

文章目录 Java如何将jar包上传到Maven中央仓库引言Step1&#xff1a;注册 JIRA 账号Step2&#xff1a;发布申请Step3&#xff1a;下载并安装GPGStep4&#xff1a;配置maven的setting.xmlStep5&#xff1a;配置pom.xmlStep6&#xff1a;上传 jar 包Step7&#xff1a;引入 jar 包…
阅读更多...
SwiftUI 中限制任意视图为指定的屏幕旋转方向

SwiftUI 中限制任意视图为指定的屏幕旋转方向

功能需求 在 SwiftUI 开发中，我们有时需要限制 App 中某些视图为特定的屏幕旋转方向，而另一些视图不做限制（或做其它限制），这可以做到吗？ 如上图所示：我们成功的限制了 SwiftUI 中不同视图对应于不同的屏幕旋转方向（Interface Orientations）。 在本篇博文中，您将学到…
阅读更多...
OpenCV - C++实战（01） — OpenCV简介

OpenCV - C++实战（01） — OpenCV简介

目录 第1章 OpenCV简介 1.1 简介 1.1.1 OpencV 库简介 1.1.2 命名空间 1.2 OpenCV模块 1.3 装载、显示和存储图像 1.3.1 创建图像 1.3.2 读取图像 1.3.3 定义窗口与显示图像 1.3.4 图像翻转 1.3.5 保存图像 1.3.6 图像的复制 1.3.7 创建数组和向量 1.…
阅读更多...
01、前端使用 thymeleaf 后，视图页面找不到---Cannot resolve MVC View ‘xxxxx前端页面‘

01、前端使用 thymeleaf 后，视图页面找不到---Cannot resolve MVC View ‘xxxxx前端页面‘

Cannot resolve MVC View ‘xxxxx前端页面’ 没有找到对应的mvc的前端页面。 代码&#xff1a;前端这里引入了 thymeleaf 模板 解决&#xff1a; 需要添加 thymeleaf 的依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>s…
阅读更多...
APP调用bindService的跨进程调用过程

APP调用bindService的跨进程调用过程

app执行bindService时会经过如下8次跨系统进程调用过程&#xff1a; 第1步&#xff1a;通过AMS.getService跨进程调用 第2步&#xff1a;AMS返回它的IBinder 第3步&#xff1a;通过AMS的IBinder调用AMS的bindService方法 第4步&#xff1a;而AMS存放有Server端的IBinder&…
阅读更多...
华为数通方向HCIP-DataCom H12-821题库(单选题：101-120）

华为数通方向HCIP-DataCom H12-821题库(单选题：101-120）

第101题 可用于多种路由协议,由 ​​if-match​​​和 ​​apply​​子句组成的路由选择工具是 A、​​route-policy​​ B、​​IP-Prefix​​ C、​​commnityfilter​​ D、​​as-path-filter​​ 答案&#xff1a;A 解析&#xff1a; Route-policy&#xff08;路由策…
阅读更多...
扫雷小游戏

扫雷小游戏

目录 一.扫雷小游戏 二.游戏主体一览 ​编辑 三.模块化设计扫雷游戏 3.1打印欢迎菜单 3.2创建两个二维数组 3.3棋盘稍加修改 3.4布置雷 3.5排查雷 四.游戏总体代码 4.1game.h头文件 4.2game.c函数实现源文件 4.3游戏main函数主体 五.游戏效果图 一.扫雷小游戏 这是…
阅读更多...
EB Tresos第一个项目报13026

EB Tresos第一个项目报13026

EB项目创建 前期的准备工作见以上这篇文章&#xff0c;不做过多叙述&#xff1b;但是点击Generate Project会报错&#xff0c;报错如下&#xff1a; Code generator finished. Errors “1” Warnings “0” 然后点击 Problems View 查看提示&#xff0c;提示如下&#xff1a; …
阅读更多...
大数据：AI大模型对数据分析领域的颠覆（文末送书）

大数据：AI大模型对数据分析领域的颠覆（文末送书）

随着数字化时代的到来&#xff0c;大数据已经成为了各行各业中不可或缺的资源。然而&#xff0c;有效地分析和利用大数据仍然是一个挑战。在这个背景下&#xff0c;OpenAI推出的Code Interpreter正在对数据分析领域进行颠覆性的影响。 如何颠覆数据分析领域&#xff1f;带着这…
阅读更多...
为什么Python列表和字典前面会加星号（**）？

为什么Python列表和字典前面会加星号（**）？

目录标题 前言一、列表&#xff08;list&#xff09;、元组&#xff08;tuple&#xff09;前面加星号*二、字典&#xff08;dict&#xff09;前面加两星号**尾语 前言 嗨喽~大家好呀&#xff0c;这里是魔王呐 ❤ ~! Python 中&#xff0c;单星号*和双星号**除了作为“乘”和“…
阅读更多...
视频汇聚/云存储/安防监控AI视频智能分析平台——明厨亮灶解决方案

视频汇聚/云存储/安防监控AI视频智能分析平台——明厨亮灶解决方案

人工智能技术已经越来越多地融入到视频监控领域中&#xff0c;近期我们也发布了基于AI智能视频云存储/安防监控视频AI智能分析平台的众多新功能&#xff0c;该平台内置多种AI算法&#xff0c;可对实时视频中的人脸、人体、物体等进行检测、跟踪与抓拍&#xff0c;支持人脸检测、…
阅读更多...
算法 for GAMES

算法 for GAMES

栈 #include <iostream> #include <stack>int main() {std::stack<int> intStack;// 压入元素到堆栈intStack.push(5);intStack.push(10);intStack.push(15);// 查看堆栈顶部元素std::cout << "Top element: " << intStack.top() <…
阅读更多...
虚虚实实，让敌人难以琢磨

虚虚实实，让敌人难以琢磨

与敌作战&#xff0c;虚虚实实&#xff0c;难以琢磨 【安志强趣讲《孙子兵法》第20讲】 第六篇&#xff1a;虚实篇 【全篇趣讲白话】 打仗就是要虚虚实实&#xff0c;让敌人难以琢磨。 【原文】 孙子曰&#xff1a;凡先处战地而待敌者佚&#xff0c;后处战地而趋战者劳。故善…
阅读更多...
Locked勒索病毒：最新变种locked袭击了您的计算机？

Locked勒索病毒：最新变种locked袭击了您的计算机？

导言&#xff1a; 在数字时代&#xff0c;一场隐秘的威胁正悄然而至&#xff0c;它的名字是.locked勒索病毒。这个黑暗的存在以其狡猾的攻击方式和致命的数据封锁能力&#xff0c;威胁着我们的数字生活。本文91数据恢复将带您深入了解.locked勒索病毒的本质&#xff0c;探索恢…
阅读更多...
【Day-20慢就是快】代码随想录-栈与队列-有效的括号

【Day-20慢就是快】代码随想录-栈与队列-有效的括号

给定一个只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串&#xff0c;判断字符串是否有效。 有效字符串需满足&#xff1a; 左括号必须用相同类型的右括号闭合。 左括号必须以正确的顺序闭合。 注意空字符串可被…
阅读更多...
Redis7安装

Redis7安装

1. 使用什么系统安装redis 由于企业里面做Redis开发&#xff0c;99%都是Linux版的运用和安装&#xff0c;几乎不会涉及到Windows版&#xff0c;上一步的讲解只是为了知识的完整性&#xff0c;Windows版不作为重点&#xff0c;同学可以下去自己玩&#xff0c;企业实战就认一个版…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023