vuex的学习

已于 2024-06-25 11:13:41 修改
阅读量930 收藏 12
点赞数 20
文章标签： 学习 vue.js 前端 javascript
于 2024-06-24 18:14:11 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55797790/article/details/139933926
版权

vuex

vuex是个插件，用于多个组件操作共享变量

引入：数字操作案例
在这里插入图片描述

基于组件自定义事件而实现的操作数字案例如下：

App.vue

<template>
  <div id="app">
    <input class="num_input" type="text" v-model.number="sum">
    <!-- 下面是两个按钮 -->
    <AddOne :sum="sum" @MyAddOne="MyAddOne"/>
    <MultiTen :sum="sum" @MyMultiTen="MyMultiTen" />
  </div>
</template>

<script>
import AddOne from './components/AddOne.vue';
import MultiTen from './components/MultiTen.vue';

export default {
  name: 'App',
  components: {
    AddOne,
    MultiTen
  },
  data() {
      return {
        sum: 0
      }
  },
  methods: {
    MyAddOne(num) {
        this.sum = num;
    },
    MyMultiTen(num) {
        this.sum = num;
    }
  }
}
</script>

<style>
    #app {
        text-align: center;
        margin: 0 auto;
    }
     * {
      margin-bottom: 1px;
    }
    .num_input {
      text-align: center;
    }
</style>

AddOne.vue

    <div>
        <button @click="addOne">点我加1</button>
    </div>
</template>

<script>
    
    export default{		
        name: '',
        props: [ 'sum', 'MyAddOne'],
        data(){
            return{
                
            }
        },
        methods: {
            addOne() {
                this.$emit('MyAddOne', this.sum + 1);
            }
        },
    }
</script>


<style>
    
</style>

MultiTen.vue

    <div>
        <button @click="mutiTen">点我乘以10</button>
    </div>
</template>

<script>
    
    export default{		
        name: '',
        props: [ 'sum'],
        data(){
            return{
                
            }
        },
        methods: {
            mutiTen() {
                this.$emit('MyMultiTen', this.sum * 10);
            }
        },
    }
</script>
<style>
</style>

可以看出，对于每个子组件去操作父组件的数据，都需要子组件有触发函数$emit，父组件需要有回调函数，十分麻烦，而vuex对共享变量的管理就显得清晰且简单得多，下面简单介绍一下vuex。

6.1 vuex工作原理

工作原理图（下图来自vuex官网）

在这里插入图片描述

state：保存共享的变量

actions：进行一些业务的逻辑，是可选的

mutations：唯一可以操作State中共享变量的地方

getter：state中共享变量的计算属性

举个例子：

Vue Components中通过 this.$store 【–> 调用dispatch(“aa”, 2) --> 触发actions里的 aa 函数 】–> commit(“aa”, 2) -->触发 mutations 的"AA"函数从而去操作state的数据 --> 改变state --> 重新渲染模板

【】中为actions的操作，是可选的

actions中的方法会可以显式传入参数 context 上下文

mutations中的方法需要传入参数 state， 第二个参数payload为可选（如果你想控制你变化数据的大小）

6.2 vuex的简单使用

基于上述的数字操作案例，用vuex实现

6.2.1 导入

vue2的项目应该使用 vuex3版本

npm i vuex@3

vue3的项目应该使用vuex4版本

npm i vuex@4

6.2.2 创建store文件夹及index.js

/store/index.js

import Vue from 'vue'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
      sum: 1
    },
    mutations: {
      ADD(state, payload) {
        state.sum += payload;
      },
      MULTI(state, payload) {
        state.sum *= payload;
      }
    }
  });
  export default store

6.2.3 注册使用

main.js

import App from './App.vue'
import store from './store'

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

6.2.4 其他

此时，在组件中可以使用 this.$store了

App.vue

  <div id="app">
  	<!-- 通过this.$store.state.XXX 可以得到共享变量XXX -->
    <input class="num_input" type="text" v-model.number="this.$store.state.sum">
    <!-- 下面是两个按钮 -->
    <AddOne />
    <MultiTen />
  </div>
</template>

<script>
import AddOne from './components/AddOne.vue';
import MultiTen from './components/MultiTen.vue';

export default {
  name: 'App',
  components: {
    AddOne,
    MultiTen
  },
}
</script>

AddOne.vue

    <div>
        <button @click="addOne">点我加1</button>
    </div>
</template>

<script>
    
    export default{		
        name:'',
        methods: {
            addOne() {
               this.$store.commit("ADD", 1)
            }
        },
    }
</script>

MultiTen.vue

    <div>
        <button @click="mutiTen">点我乘以10</button>
    </div>
</template>

<script>
    export default{		
        name: '',
        methods: {
            mutiTen() {
               this.$store.commit('MULTI', 10)
            }
        },
    }
</script>

6.3 mapState

mapState可以帮我们在 this.$store.state 定义的共享变量作为计算属性自动生成

6.3.1 使用

导入

import {mapState} from 'vuex'

App.vue

import MultiTen from './components/MultiTen.vue';
import { mapState } from 'vuex';

export default {
  name: 'App',
  components: {
    AddOne,
    MultiTen
  },
  computed: {
    //这下面两个是等价的，都将 sum 作为计算属性sum显示到页面上
    //1.
    // sum() {
    //   return this.$store.state.sum;
    // },
    //2.
    //我们直接采用 mapState的数组写法
    // ...mapState(['sum'])
  }
}

如果要使用mapState、mapGettters、mapMutations、mapActions ，要求在 this.$store 里定义的东西的名字和在组件中使用的 mapXXX(‘[Name]’) 中的Name名字相同

mapGettters、mapMutations、mapActions 的使用基本同理，但需要在调用的地方传好参数 ，不太方便

举个例子：

/store/index.js

import Vue from 'vue'
Vue.use(Vuex)
const store = new Vuex.Store({
    state: {
      sum: 1
    },
    mutations: {
      ADD(state, payload) {
        state.sum += payload
      }
    }
  });
  export default store

App.vue

  <div id="app">
    <input class="num_input" type="text" v-model.number="sum">
    <!-- 需要一开始就定义好参数，所以更适合没参数的方法 -->
    <button @click="ADD(1)">点我加1</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'App',
  computed: {
  	 // 需要和 this.$store.state中的sum变量同名
     ...mapState(['sum'])
  },
  methods: {
    // 需要和 this.$store.mutations中的ADD方法同名
    ...mapMutations(['ADD'])
  }
}
</script>

6.4 Vuex 分模块配置

const a = {
	namespaced: true //默认是false, 开启方便使用mapXXX
	actions:{},
	//....
}
const b = {
	//...
}

export default new Vue.store({
	modules:{
		a : [变量1],
		b : [变量2]
	}
})

此时，通过组件的 this.$store.state.[模块名] 去获取state对应的内容

通过组件的 this.$store.getters.[‘模块名/对应内容’]去获取getters中的内容

dispatch 和 commit 通过 this.$store.[commit / dispatch](‘模块名/内容名’)

mapState, mapGetters 写成 …mapXXX('模块名 ', [‘数组内容’],)

mapActions 和 mapMutations 需要写成 …mapXXX(‘模块名’，{xx: xx})

举个例子：
/store/index.js

import Vue from 'vue'
Vue.use(Vuex)

const a = {
    namespaced: true, //默认是false, 开启方便使用mapXXX
    state: {
        s_age: 1
    }
}
const b = {
    namespaced: true, //默认是false, 开启方便使用mapXXX
    state: {    
        t_age: 2
    },
    mutations: {
        ADD_ONE_TEACHER(state) {
            state.t_age++
        }
    }
}
const store = new Vuex.Store({
   modules: {
      // 冒号前面的是模块名，后面的是const定义的常量名
      student : a,
      teacher : b
   }
  });
  export default store

App.vue

  <div id="app">
    <input class="num_input" type="text" v-model.number="s_age">
    <input class="num_input" type="text" v-model.number="t_age">
    <button @click="ADD_ONE_TEACHER(1)">点我加1</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  name: 'App',
  computed: {
    ...mapState('teacher', ['t_age']),
     
    //以下两种是等效的
    //1.
    // s_age() {
    //   return this.$store.state.student.s_age
    // },
    //2.
     ...mapState('student', ['s_age']),
    
  },
  methods: {
    //以下两种是等效的
    //1. 
    // ADD_ONE_TEACHER(num) {
    //   this.$store.commit('teacher/ADD_ONE_TEACHER', num)
    // },
    //2.
    ...mapMutations('teacher', {ADD_ONE_TEACHER: 'ADD_ONE_TEACHER'})
  }
}
</script>
呀243
关注
vuex学习网址111111111
04-23
根据给定的信息，我们可以梳理出以下几个关键的知识点： ### 1. Java中Arrays.asList()方法 ...而对于Vue.js应用程序来说，Vuex提供了一个高效的状态管理方案，帮助开发者更好地组织和管理应用的状态。
vuex学习之Actions的用法详解
08-29
"Vuex学习之Actions的用法详解" Vuex是一个基于flux架构的状态管理库，用于管理应用程序的状态。Actions是Vuex中的一种机制，用于异步提交mutation，实现状态的变化。本篇文章将详细介绍Vuex学习之Actions的用法...
vuex学习的小例子，包含所有的State、Getter、Mutation、Action、Module的使用
03-15
在这个“vuex学习的小例子”中，我们将深入理解Vuex的核心概念：State、Getter、Mutation、Action以及Module。 **State** 在Vuex中，State是存储应用全局状态的地方。所有组件都可以访问这些状态，但直接修改State...
Vuex提升学习篇
08-28
在Vuex的学习中，提升篇主要讲解了如何在实际项目中更有效地管理和处理状态，包括使用actions进行复杂的逻辑处理和异步操作，以及利用getters获取处理过的数据状态。以下是对这些知识点的详细阐述： 首先，actions...
【OpenCV C++20 学习笔记】给图片加边框-copyMakeBorder
TeamLee的博客
08-06 160
简单介绍在OpenCV中如何用copyMakeBorder的方法给图片添加边框
【GCC】结合GPT4 延迟梯度学习2：延迟梯度的计算及阈值更新
最新发布
突围
08-06 19
拥塞控制
HTML5新增元素属性学习
weixin_68441705的博客
08-06 93
placeholder：提示性语句，在文本输入框 上提示用户输入内容，当用户填充内容消失，删除内容又出现（用于提示用户输入用户名，密码，适合短的提示语句）2.datalist 表单新元素 配合input使用，有下拉菜单也可以输入内容（通常用于搜素引擎）autofocus：自动聚焦，进入注册界面，光标自动聚焦在输入框上，用于提升用户体验。min和max ：最大值 最小值 可以配合其他属性使用，用于数值型。required：必填项，用户如果不填，表单无法提交。autocomplete：自动填充，通常用于登录。
学习STM32（4）--STM32单片机定时器的应用
weixin_73690807的博客
08-06 506
学习stm32第五篇
嵌入式学习之路 12 （C语言基础学习 —— 一维、二维数组做函数参数）
weixin_63556308的博客
08-03 721
二维字符型数组用来存储多个字符串，操作时往往都是要操作多个字符串，而多个字符串没有所谓的结束标志，看的是数组行数。一位字符串数组主要用来存放字符串数据，而字符串数据有结束标志，所以传参时不需要传长度。因为处理的是字符串数据，字符串操作的依据是看结束标志'\0'，所以不需要传数组长度。练习：对一维字符型数组做函数参数的操作。练习：对一维整型数组做函数参数的操作。练习：对二维整型数组做函数参数的操作。练习：对二维字符型数组做函数参数的操作。做形参要写数组形式+行数；做实参要写数组名+行数；
接口测试学习笔记1
weixin_53666393的博客
08-03 895
同时也像白盒测试那样，检查程序的代码，但这种检查不像白盒测试那样详细、完整，一般只对程序模块之间的调用、核心代码进行检查，在集成测试时经常采用，一般也是程序员大量采用。现在企业说的接口测试，一般指的是Web接口测试或Http接口测试，主要指的是基于B/S架构的接口测试（B/S架构主要基于HTTP 超文本传输协议，所以也叫HTTP接口测试）对请求对象（网页、文件、图片...）进行的操作，就是一些命令，程序员在编程的时候使用，在接口文档中会指明，测试人员测试接口的时候，按照说明选择正确的方法。
IROS2024 | DarkGS：学习神经照明和3D高斯重新照明，用于黑暗中机器人探索
08-06 527
论文标题：DarkGS: Learning Neural Illumination and 3D Gaussians Relighting for Robotic Exploration in the Dark论文地址：https://arxiv.org/abs/2403.10814。
编程的魅力、发展历程、核心要素、学习路径以及它对个人成长和社会进步的深远影响
z86666610的博客
08-02 523
进入21世纪，随着互联网的普及和移动设备的兴起，编程语言更加多样化，如Python、JavaScript等，它们以其简洁易学的特点吸引了大量初学者。同时，人工智能、大数据、云计算等新兴技术的快速发展，更是将编程推向了新的高度，使得编程成为推动社会进步的重要力量。编程的魅力，在于它让我们能够将自己的想法直接转化为现实，体验到从无到有的创造过程。本文将深入探讨编程的魅力、发展历程、核心要素、学习路径以及它对个人成长和社会进步的深远影响，旨在为读者勾勒出一幅全面而生动的编程世界图景。
重生之我 学习【数据结构之顺序表（SeqList）】
xupy019的博客
08-06 766
全新的开始，为大家带来数据结构的内容（C语言实现）将以顺序表、链表、栈区、队列、二叉树、常见排序算法为主要内容展开学习
SpringBoot快速学习
qq_46091002的博客
08-06 208
目录SpringBoot配置文件多环境配置SpringBoot整合junitSpringBoot整合mybatis1.在创建时勾选需要的模块2.定义实体类3.定义dao接口4.编写数据库配置5.使用Druid数据源 是对 开发进行简化的。那我们先来看看SpringMVC开发中的一些必须流程。从上面的 程序开发可以看到，前三步都是在搭建环境，而且这三步基本都是固定的。 就是对这三步进行简化了。对比一下 程序和 程序。使用SpringBoot后我们只需要定义Controller和Application
C语言零基础学习笔记11——分支和循环（五）
Lbs_gemini0603的博客
08-02 1244
C语言零基础学习笔记11——分支和循环（五）
【Datawhale AI夏令营】从小白开始 - 逻辑推理学习Task2
随心所欲的便笺
08-05 603
大语言模型的概念就是通过数据集进行训练，经过不断调整指令参数来解决推理问题。
昇思基础课程打卡（SPONGE课前学习）9.使用静态图加速
cftang9999的专栏
08-06 314
AI编译框架分为两种运行模式，分别是动态图模式以及静态图模式。MindSpore默认情况下是以动态图模式运行，但也支持手工切换为静态图模式。
File文件类学习总结
c1tenj2的博客
08-02 159
【代码】File文件类学习总结。
模型优化学习笔记—Adam算法
文盲青年的博客
08-05 197
假设动量梯度下降，可以在30个epoch能找到最小值，那么RMSprop能在20个epoch中找到，而Adam更厉害，因为它是动量梯度下降和RMSprop的结合体。： 虽然表面r没变，但是w=w-rdw，当dw变大，w变小，相当于r变大的效果。起到了与调整r的同样的作用：改变了梯度下降在某个方向的学习速度。超参数：r、k1、k2，一般k1和k2取0.9和0.999且很少改变。3、梯度下降（其中sqrt表示开平方，u取10^(-8) ），算出指数加权移动平均，即动量梯度下降。，修正动量梯度下降的值。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值