Vue篇-05

5 vuex

5.1 vuex是什么

  • 概念:专门在 Vue 中实现集中式状态(数据)管理的一个Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。
  • Github 地址: https://github.com/vuejs/vuex

5.2 什么时候用

  • 多个组件依赖于同一状态
  • 来自不同组件的行为需要变更同一状态

5.3 求和案例

Count.vue:-纯vue版

<template>
  <div>
    <h1>当前求和为：{{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="incrementOdd">当前求和为奇数再加</button>
    <button @click="incrementWait">等一等再加</button>
  </div>
</template>

<script>
export default {
  name:'Count',
  data(){
    return{
      n:1,//用户选择的数字
    sum:0//当前的和
    }
  },
  methods:{
    increment(){
      this.sum+=this.n
    },
    decrement(){
      this.sum-=this.n
    },
    incrementOdd(){
      if(this.sum%2){
        this.sum+=this.n
      }
    },
    incrementWait(){
      setTimeout(()=>{

      },500)
    }
  }
}
</script>

<style lang="css">
  button{
    margin-left: 5px;
  }
</style>

5.4 vuex原理

在vscode界面，使用npm i vuex@3安装第三个版本的适用于vue2的版本

5.5 搭建环境


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

2.在 main.js 中创建vm时传入 store 配置项

//引入store
import store from './store
//创建vm
new Vue({
    el:'#app',
    render:h =>h(App),
    store
})

5.6 基本使用


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

2.组件中读取vuex中的数据:$store.state.sum
3.组件中修改vuex中的数据:$store.dispatch('action中的方法名',数据)或$store.commit('mutations中的方法名',数据)


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

getters的使用
1.概念:当state中的数据需要经过加工后再使用时，可以使用getters加工
2.在 store.js 中追加 getters 配置

const getters ={
    bigSum(state){
        return state.sum*10
    }
}

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

3.组件中读取数据:$store.getters.bigSum 

5.7 四个map方法的使用

1.mapstate方法:用于帮助我们映射 state 中的数据为计算属性

computed:{
    //借助mapstate生成计算属性:sum、schoo1、subject(对象写法)
    ...mapState({sum:'sum',school:'school',subject:'subject'})
    //借助mapState生成计算属性:sum、schoo1、subject(数组写法)
    ...mapState(['sum','school','subject'])
},

2.mapGetters方法:用于帮助我们映射 getters 中的数据为计算属性

computed:{
    //借助mapGetters生成计算属性:bigSum(对象写法)
    ...mapGetters({bigSum:'bigSum'})
    //借助mapGetters生成计算属性:bigSum(数组写法)
    ..mapGetters(['bigSum'])
},

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

methods:{
    //靠mapActions生成:incrementOdd、incrementWait(对象形式)
    ...mapActions({incrementOdd:'jia0dd',incrementWait:'jiaWait'})
    //靠mapActions生成:incrementOdd、incrementWait(数组形式)
    ...mapActions(['jia0dd','jiaWait'])
}

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

methods :{
    //靠mapActions生成:increment、decrement(对象形式)
    ...mapMutations({increment:'JIA',decrement:"JIAN'})
    //靠mapMutations生成:JIA、JIAN(对象形式)
    ...mapMutations(['JIA','JIAN']),
}

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

5.8 多组件共享数据

 就是各个组件都能拿到state里的数据，然后用来用去了，很方便

5.9 Vuex模块化+命名空间（项目常用）

如果我们写的state，actions什么的是服务于多个种类的，比如有管加法的，有管人员的，这样放到一起很乱，所以可以把它们拆开 

让代码更好维护，让多种数据分类更加明确。

使用方式：

可以都写到index.js里，也可以每个命名空间分别拆成多个js文件

const countAbout = {
namespaced:true,//开启命名空间
state:{x:1},
mutations: { ... },
actions: { ... },
getters: {...}
}
}

const personAbout = {
namespaced:true,//开启命名空间
state:{ ... },
mutations: { ... },
actions: { ... }
}

const store = new Vuex.Store({
modules: {
 countAbout,
 personAbout
}
})

1、开启命名空间后，组件中读取state数据 

//方式一：自己直接读取
this.$store.state.personAbout.list
//方式二：借助mapState读取：
...mapState('countAbout',['sum','school','subject']), 
// 前边加个参数，意思是读取countAbout 里面的 sum,school.....

2、开启命名空间后，组件中读取getters数据 

//方式一：自己直接读取
this.$store.getters['personAbout/firstPersonName'] //很奇葩
//方式二：借助mapGetters读取：
...mapGetters('countAbout',['bigSum'])

3、开启命名空间后，组件中调用dispatch

如果不写namespaced则直接写addPersonWang就可以，但是开启了命名空间，必须要加上这个名字在前边，否则会报[vuex] unknown action type: addPersonWang的错误，而且前边这个名字必须和Vuex.Store({})配置项中的名字一致。

//方式一：自己直接dispatch
this.$store.dispatch('personAbout/addPersonWang',person)
//方式二：借助mapActions：
...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

4、开启命名空间后，组件中调用commit

//方式一：自己直接commit
this.$store.commit('personAbout/ADD_PERSON',person)
//方式二：借助mapMutations：
...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

 完整代码：

1、index.js

//引入Vue
import Vue from 'vue';
//引入Vuex
import Vuex from 'vuex';//引入插件并使用插件
Vue.use(Vuex);

//关于计数的相关配置
import countAbout from './Count'

//关于人员的相关配置
import personAbout from './Person'


//创建并导出store
export default new Vuex.Store({
    modules: {
        countAbout: countAbout,
        personAbout  //重名简写 
    }
});

 2、Count.js

export default {
    namespaced: true,
    state: {
        sum: 0,  //初始化数据
        school: '杭州',
        subject: '前端',
    },
    getters: {
        bigSum(state) {
            return state.sum * 10;
        }
    },
    actions: {
        oddAdd(context, value) {
            //第一个参数是浓缩版的$store，方便你在这里调用commit把东西给mutations
            //第二个参数是传过来的数据
            context.commit('JIA', value);
        },
        waitAdd(context, value) {
            setTimeout(() => {
                context.commit('JIA', value);
            }, 1000);
        },
    },
    mutations: {
        JIA(state, value) {
            //第一个参数是state对象，第二个参数是传过来的数据
            console.log('mutations中的JIA被调用了 ', state, value);
            state.sum += value;
        },
        JIAN(state, value) {
            state.sum -= value;
        },
    }
}

3、Count.vue

<template>
    <div>
        <h1>当前求和为：{{  sum  }}</h1>
        <h2>当前求和放大十倍后为：{{  bigSum  }}</h2>
        <h3>我在{{  school  }}学习{{  subject  }}</h3>
        <select v-model.number="addnum">
            <option value="1" checked>1</option><!-- 不写冒号就是字符串但可以v-model.number -->
            <option value="2">2</option> <!-- 不写冒号就是字符串但可以v-model.number -->
            <option value="3">3</option> <!-- 不写冒号就是字符串但可以v-model.number -->
        </select>
        <button @click="JIA(addnum)">+</button>
        <button @click="JIAN(addnum)">-</button>
        <button @click="oddAdd(addnum)">当前求和为奇数再加</button>
        <button @click="waitAdd(addnum)">等1秒再加</button>

        <h2 style="color:red">Count里边读personList</h2>
        <ul style="color:red">
            <li v-for="p in personList" :key="p.id">{{  p.name  }}</li>
        </ul>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions, mapMutations } from 'vuex';
export default {
    name: 'Count',
    data() {
        return {
            addnum: 1
        }
    },
    computed: {
        personList() {
            return this.$store.state.personAbout.personList;
        },
        ...mapState('countAbout', ['sum', 'school', 'subject']),
        ...mapGetters('countAbout', { bigSum: 'bigSum' }),
    },
    methods: {
        ...mapMutations('countAbout', ['JIA', 'JIAN']),
        ...mapActions('countAbout', { oddAdd: 'oddAdd', waitAdd: 'waitAdd' }),
    },
    mounted() {
        console.log(this.$store)
    }
};
</script>

 4、Person.js

import axios from 'axios';
import { nanoid } from 'nanoid';
export default {
    namespaced: true,
    state: {
        personList: [
            { id: 1, name: 'zzy' }
        ]
    },
    getters: {
        firstPersonName(state) {
            return state.personList[0].name;
        }
    },
    actions: {
        addPersonHan(context, value) {
            if (value.name.indexOf('韩') === 0) {
                context.commit('ADD_PERSON', value);
            } else {
                alert('添加的人不姓韩！');
            }
        },
        //发送ajax请求拿到名字
        addPersonServer(context) {
            axios.get('http://api.uixsj.cn/hitokoto/get?type=social').then(
                response => {
                    context.commit('ADD_PERSON', { id: nanoid(), name: response.data });
                },
                error => {
                    console.log(error.message);
                }
            )
        }
    },
    mutations: {
        ADD_PERSON(state, value) {
            state.personList.unshift(value);
        }
    }
}

5、Person.vue

<template>
    <div>
        <h2>Person里边读personList</h2>
        <input type="text" placeholder="请输入名字" v-model="name">
        <button @click="addPerson">添加</button>
        <button @click="addPersonHan">添加一个姓韩的人</button>
        <button @click="addPersonServer">随机添加一个名字</button>
        <h2>第一个人的名字：{{  firstPersonName  }}</h2>
        <ul>
            <li v-for="p in personList" :key="p.id">{{  p  }}</li>
        </ul>
        <h2 style="color:red">Person里读sum：{{  add  }}</h2>
    </div>
</template>

<script>
import { nanoid } from 'nanoid';
export default {
    name: 'Person',
    data() {
        return {
            name: ''
        }
    },
    computed: {
        personList() {
            return this.$store.state.personAbout.personList;
        },
        add() {
            return this.$store.state.countAbout.sum;
        },
        firstPersonName() {
            return this.$store.getters['personAbout/firstPersonName'];
        }
    },
    methods: {
        addPerson() {
            const personObj = { id: nanoid(), name: this.name };
            this.$store.commit('personAbout/ADD_PERSON', personObj);
            this.name = '';  //添加完了输入框置空
        },
        addPersonHan() {
            const personObj = { id: nanoid(), name: this.name };
            this.$store.dispatch('personAbout/addPersonHan', personObj);
        },
        addPersonServer() {
            this.$store.dispatch('personAbout/addPersonServer');
        }
    },
};
</script>

 注意：只有指定相应的模块名才能找到对应的数据和方法（前提是模块开启了命名空间）

其中的部分笔记引用下面的文章

Vue2（十二）：Vuex环境搭建、Vuex工作原理、几个配置项、多组件共享数据、Vuex模块化_vue2 yarn安装vuex-CSDN博客

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Vue3(elementPlus) el-table替换/隐藏行箭头，点击整行展开

Vue3(elementPlus) el-table替换/隐藏行箭头，点击整行展开

element文档链接&#xff1a; https://element-plus.org/zh-CN/component/form.html 一、el-table表格行展开关闭箭头替换成加减号 注&#xff1a;Vue3在样式中修改箭头图标无效&#xff0c;可能我设置不对&#xff0c;欢迎各位来交流指导 转变思路&#xff1a;隐藏箭头&…
阅读更多...
opencv的NLM去噪算法

opencv的NLM去噪算法

NLM&#xff08;Non-Local Means&#xff09;去噪算法是一种基于图像块&#xff08;patch&#xff09;相似性的去噪方法。其基本原理是&#xff1a; 图像块相似性&#xff1a;算法首先定义了一个搜索窗口&#xff08;search window&#xff09;&#xff0c;然后在该窗口内寻找…
阅读更多...
NineData云原生智能数据管理平台新功能发布｜2024年12月版

NineData云原生智能数据管理平台新功能发布｜2024年12月版

本月发布 7 项更新&#xff0c;其中重点发布 2 项、功能优化 5 项。 重点发布 数据库 Devops - Oracle 非表对象支持可视化创建与管理 Oracle 非表对象&#xff0c;包括视图&#xff08;View&#xff09;、包&#xff08;Package&#xff09;、存储过程&#xff08;Procedur…
阅读更多...
计算机网络 —— 网络编程（TCP）

计算机网络 —— 网络编程（TCP）

计算机网络 —— 网络编程&#xff08;TCP&#xff09; TCP和UDP的区别TCP (Transmission Control Protocol)UDP (User Datagram Protocol) 前期准备listen &#xff08;服务端&#xff09;函数原型返回值使用示例注意事项 accpect &#xff08;服务端&#xff09;函数原型返回…
阅读更多...
eNSP之家----ACL实验入门实例详解（Access Control List访问控制列表）（重要重要重要的事说三遍）

eNSP之家----ACL实验入门实例详解（Access Control List访问控制列表）（重要重要重要的事说三遍）

ACL实验&#xff08;Access Control List访问控制列表&#xff09;是一种基于包过滤的访问控制技术&#xff0c;它可以根据设定的条件对接口上的数据包进行过滤&#xff0c;允许其通过或丢弃。访问控制列表被广泛地应用于路由器和三层交换机。 准备工作 在eNSP里面部署设备&a…
阅读更多...
PySide6基于QSlider实现QDoubleSlider

PySide6基于QSlider实现QDoubleSlider

我在写小工具的时候&#xff0c;需要一个支持小数的滑动条。 我QSpinBox都找到了QDoubleSpinBox&#xff0c;QSlider愣是没找到对应的东西。 网上有好多对QSlider封装实现QDoubleSlider的文章。 似乎Qt真的没有这个东西&#xff0c;需要我们自行实现。 于是我也封装了一个&…
阅读更多...
即插即用，无缝集成各种模型，港科大蚂蚁等发布Edicho：图像编辑一致性最新成果！

即插即用，无缝集成各种模型，港科大蚂蚁等发布Edicho：图像编辑一致性最新成果！

文章链接&#xff1a;https://arxiv.org/pdf/2412.21079 项目链接&#xff1a;https://ezioby.github.io/edicho/ 亮点直击 显式对应性引导一致性编辑&#xff1a;通过将显式图像对应性融入扩散模型的去噪过程&#xff0c;改进自注意力机制与分类器自由引导&#xff08;CFG&…
阅读更多...
福建双色荷花提取颜色

福建双色荷花提取颜色

提取指定颜色 HSV双色荷花代码验证 参照《OpenCV图像处理技术》 HSV 要用HSV的色调、饱和度和亮度来提取指定颜色。 双色荷花 农林大学金山校区观音湖 代码 import cv2 import numpy as npimgcv2.imread("./sucai6/hua.jpg") cv2.imshow("SRC",img) h…
阅读更多...
关于重构一点简单想法

关于重构一点简单想法

关于重构一点简单想法 当前工作的组内&#xff0c;由于业务开启的时间正好处于集团php-》go技术栈全面迁移的时间点&#xff0c;组内语言技术栈存在&#xff1a;php、go两套。 因此需求开发过程中通常要考虑两套技术栈的逻辑&#xff0c;一些基础的逻辑也没有办法复用。 在这…
阅读更多...
【操作系统】课程 7设备管理 同步测练 章节测验

【操作系统】课程 7设备管理 同步测练 章节测验

7.1知识点导图 它详细地展示了I/O系统的层次结构、I/O硬件和软件的组成以及它们的功能。下面是对图中内容的文字整理&#xff1a; I/O设备分类 按使用特性分类 输入设备&#xff1a;键盘、鼠标等输出设备&#xff1a;打印机、绘图仪等交互式设备&#xff1a;显示器等 按传输速率…
阅读更多...
用 Python 绘制可爱的招财猫

用 Python 绘制可爱的招财猫

✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连 ✨ ✨个人主页欢迎您的访问 ✨期待您的三连✨ ​​​​​ ​​​​​​​​​ ​​​​ 招财猫&#xff0c;也被称为“幸运猫”&#xff0c;是一种象征财富和好运的吉祥物&#xff0c;经常…
阅读更多...
【Vue.js 组件化】高效组件管理与自动化实践指南

【Vue.js 组件化】高效组件管理与自动化实践指南

文章目录 摘要引言组件命名规范与组织结构命名规范目录组织 依赖管理工具自动化组件文档生成构建自动引入和文档生成的组件化体系代码结构自动引入组件配置使用 Storybook 展示组件文档自动生成 代码详解QA 环节总结参考资料 摘要 在现代前端开发中&#xff0c;组件化管理是 V…
阅读更多...
4.5 在C++节点中使用参数

4.5 在C++节点中使用参数

本节沿用之前4.3 节小海龟控制例子。 4.5.1 参数声明与设置 打开src/demo_cpp_service/src/turtle_control.cpp文件 添加测试代码 this->declare_parameter("k",1.0);this->declare_parameter("max_speed",1.0);this->get_parameter("k&q…
阅读更多...
Java agent

Java agent

‌ Java Agent是一种特殊的Java程序&#xff0c;它可以在JVM启动时或运行时动态加载&#xff0c;用于监控和修改其他Java应用程序的行为‌。通过Java Agent&#xff0c;开发者可以在不修改目标应用程序源码的情况下&#xff0c;动态地插入功能&#xff0c;如性能分析、日志记录…
阅读更多...
Cannot run program “docker“: CreateProcess error=2,系统找不到指定的文件

Cannot run program “docker“: CreateProcess error=2,系统找不到指定的文件

今天被这个问题坑了, 网上教程全是直接装插件就行 ,结果我连接可以成功 但是执行docker compose 就会出错, 检测配置 报错com.intellil,execution,process.ProcessNotCreatedException: Cannot run program “docker”: CreateProcess error2,系统找不到指定的文件 gpt 要我去…
阅读更多...
二、模型训练与优化（4）：模型优化-实操

二、模型训练与优化（4）：模型优化-实操

下面我将以 MNIST 手写数字识别模型为例&#xff0c;从 剪枝 (Pruning) 和 量化 (Quantization) 两个常用方法出发&#xff0c;提供一套可实际动手操作的模型优化流程。此示例基于 TensorFlow/Keras 环境&#xff0c;示范如何先训练一个基础模型&#xff0c;然后对其进行剪枝和…
阅读更多...
免费图片批量压缩工具-支持批量修改分辨率

免费图片批量压缩工具-支持批量修改分辨率

工作需求&#xff0c;需要支持修改分辨率上限的同时进行图片压缩&#xff0c;设计此工具。 1.支持批量文件夹、子文件 2.支持最大分辨率上限&#xff08;高于设定分辨率的图片&#xff0c;强制修改为指定分辨率&#xff0c;解决大图的关键&#xff09; 3.自定义压缩质量&#x…
阅读更多...
Github上传项目

Github上传项目

写在前面&#xff1a; 本次博客仅仅是个人学习记录&#xff0c;不具备教学作用。内容整理来自网络&#xff0c;太多了&#xff0c;所以就不放来源了。 在github页面的准备&#xff1a; 输入标题。 往下滑&#xff0c;创建 创建后会跳出下面的页面 进入home就可以看到我们刚…
阅读更多...
并发编程 之 Java内存模型(详解)

并发编程 之 Java内存模型(详解)

Java 内存模型&#xff08;JMM&#xff0c;Java Memory Model&#xff09;可以说是并发编程的基础&#xff0c;跟众所周知的Java内存区域(堆、栈、程序计数器等)并不是一个层次的划分&#xff1b; JMM用来屏蔽各种硬件和操作系统的内存访问差异&#xff0c;以实现让Java程序在各…
阅读更多...
[QCustomPlot] 交互示例 Interaction Example

[QCustomPlot] 交互示例 Interaction Example

本文是官方例子的分析: Interaction Example 推荐笔记: qcustomplot使用教程–基本绘图 推荐笔记: 4.QCustomPlot使用-坐标轴常用属性 官方例子需要用到很多槽函数, 这里先一次性列举, 自行加入到qt的.h中.下面开始从简单的开始一个个分析. void qcustomplot_main_init(void); …
阅读更多...
最新文章

Copyright @ 2022~2023