Vuex基础语法

news2024/12/23 11:19:00

Vuex

vuex官网

文章目录

      • Vuex
          • vuex的工作原理图
          • 2.vuex的环境搭建
          • 3.vuex的使用
            • 1.actons
            • 2. mutations
            • 3.getters
          • 4.vuex中的map映射属性
            • 4.1 mapState和mapGetters
            • 4.2 mapMutations和mapActions
          • 5.vuex多组件通信
            • 1.通过计算属性获得
            • 2.通过mapState获得
          • 6.vuex模块化和命名空间
            • 6.1模块化

vuex的工作原理图

Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex的工作原理是,它将应用的状态存储在一个单一的状态树中,并且提供了一组可以改变状态树的方法,这些方法只能通过提交mutation来调用。

在这里插入图片描述

2.vuex的环境搭建

1.安装vuex3版本

npm i vuex@3

2.准备store环境

//改文件用于创建Vuex的核心store

//映入vuex
import Vuex from 'vuex'

//引入vux
import Vue  from 'vue'

Vue.use(Vuex)

// 准备actions-用于响应组件动作
const actions={}

//准备mutations-用于曹组数据

const mutations={}

//准备state
const state={}

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

3.在main.js引入
在这里插入图片描述

// 引入vuex
import Vuex from 'vuex'

//映入store
import store from './store/index'
//使用vuex
Vue.use(Vuex)
new Vue({
  el:"#app",
  store,
  render: h => h(App),
  // 安装全局事件总线
  beforeCreate(){
    Vue.prototype.$bus=this // this为vm,安装全局事件总线
  }
}) //配置容器id

在这里插入图片描述

3.vuex的使用

注意在VC和vm中都有了store,store本身都有很多的方法可以直接在VC和vm中调用。

add(){
    //在VC调用store
     this.$store.dispatch('jia',this.n)
   },

在soter中

1.actons
const actions={
    jia(context,value){
        console.log('actons',context)
      context.commit('JIA',value)
    }
}

在这里插入图片描述

2. mutations
const mutations={
    JIA(state,value){
        console.log('mutations',state)
      state.sum+=value
    }
}

在这里插入图片描述

注意在VC的store中保存着state的值。
在这里插入图片描述

3.getters

Vuex中的getters用于从store中获取状态,它的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算,
会对state中的数据进行加工

//准备state-用于将state中的数据加工
const getters={
    bigSum(state){
     return state.sum*10
    }
}

在组件中使用getters

$store.getters.bigSum

在这里插入图片描述

4.vuex中的map映射属性
4.1 mapState和mapGetters

VuexmapState是Vuex的一个实用程序函数,用于将Vuex存储中的状态映射到组件的计算属性中。它接受一个字符串数组或对象,其中包含要映射的状态名称,并返回一个对象,其中包含映射的状态。
1.其中mapState将state中的数据映射到对应的方法上
2.其中mapGetters将getters中的数据映射到对应的方法上

1.映入mapState

import { mapState } from 'vuex';
import { mapGetters } from 'vuex';

2.在计算属性中

computed:{
   // 对象结构
  //借助mapstate生成计算属性,从state中读取数据
  ...mapState(['sum','school']),

  // 借助mapgetters生成计算属性,从getters中读取数据
    ...mapGetters(['bigSum'])
 }

在这里插入图片描述

4.2 mapMutations和mapActions

mapMutations作用是将组件中的 methods 映射为 store.commit 调用(需要在根节点注入 store),它将组件中的 methods 映射为 store.commit 的调用,从而可以直接触发状态变更。

  methods:{
  // 借助mapMUtations生成对应的方法,在方法中会调用commit去联系mutation(对象的写法)
  ...mapMutations({add:'JIA',decde:'JIAN'}),
  }

mapActions是Vuex中的一个方法,它可以将store中的actions映射到组件的methods中,从而使组件可以调用store中的actions。

5.vuex多组件通信

vuex多组件通信是通过获取state中的值使得数据共享,由于store中的state都可可以在vc中通过this.$store.state拿取到对应的值。

1.通过计算属性获得
computed:{
     sum(){
        return this.$store.state.sum
     }
   },
2.通过mapState获得
   computed:{
     ...mapState(['sum'])
   },
6.vuex模块化和命名空间

Vuex模块化是指将Vuex的store分割成模块,每个模块拥有自己的state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割,使得状态管理更加清晰明了

Vuex 命名空间是一种机制,可以让你在一个 store 中定义多个模块,从而使得代码更加组织和可维护。它使用一个 namespace 来标识每个模块,以便在不同模块之间进行区分

6.1模块化

在模块化的中必须加上 namespaced:true,

在sotre中

const countAbout={
    // 开启命名空间
   namespaced:true,
    actions:{},
    mutations:{
        JIA(state,value){
            console.log('mutations',state)
          state.sum+=value
        },
        JIAN(state,value){
            console.log('mutations',state)
          state.sum-=value
        },
    },
    state:{
        sum:0,
        school:'下滑',
    },
    getters:{
        bigSum(state){
            return state.sum*10
           }
    }
}

//创建并暴露store
export default new Vuex.Store({
    modules:{
        countAbout,
    }
})

在页面,可以直接通过差值表达式渲染。
1.获取state中的值


  computed: {
    // 对象结构
    //借助mapstate生成计算属性,从state中读取数据
    // ...mapState(['sum','school','personList']),

    ...mapState("countAbout", ["sum", "school"]),
    ...mapState("personAbout", ["personList"]),

    // 借助mapgetters生成计算属性,从getters中读取数据
    // ...mapGetters(['bigSum'])
  },

2.获mucation中的值

methods: {
    // 借助mapMUtations生成对应的方法,在方法中会调用commit去联系mutation(对象的写法)
    ...mapMutations("countAbout", { add: "JIA", decde: "JIAN" })},

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

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

相关文章

为什么要用线程池?

1.降低资源消耗。通过重复利用已创建的线程降低线程创建和销毁造成的消耗。 2.提高响应速度。当任务到达时,任务可以不需要的等到线程创建就能立即执行。 3.提高线程的可管理性。线程是稀缺资源,如果无限制的创建,不仅会消耗系统资源&#…

王道《操作系统》学习(一)——计算机系统概述

1.1 操作系统的概念、功能 1.1.1 操作系统的概念(定义) (1)操作系统是系统资源的管理者 (2)向上层用户、软件提供方便易用的服务 (3)是最接近硬件的一层软件 1.1.2 操作系统的功能…

Java 输入输出流

应用程序经常需要访问文件和目录,读取文件信息或写入信息到文件,即从外界输入数据或者向外界传输数据,这些数据可以保存在磁盘文件、内存或其他程序中。在Java中,对这些数据的操作是通过 I/O 技术来实现的。所谓 I/O 技术&#xf…

Vue2.0开发之——使用ref引用DOM元素(40)

一 概述 什么是ref引用ref引用示例 二 什么是ref引用 ref用来辅助开发者在不依赖于jQuery的情况下,获取DOM元素或组件的引用每个vue的组件实例上,都包含一个$refs对象,里面存储着对应的DOM元素或组件的应用默认情况下,组件的$re…

Vue3之事件绑定

何为事件绑定 当我们开发完UI界面后,还需要和用户交互,所谓交互也就是用户可以点击界面上的按钮,文字,链接等以及点击键盘上的按钮,我们开发的程序可以做出对应的反应。做出的反应会通过UI界面再反馈给用户&#xff0c…

CSS 之层叠规则(权级、权重、顺序)详解

文章目录参考描述定义层叠层叠与冲突规则权重(优先级)权重值的叠加顺序权级权级层叠规则的运用顺序尾声参考 项目描述MDN WEB Docs优先级Amily_mo令人烦恼的css选择器权值问题 - Amily_mo深入解析CSS基思J.格兰特 / 黄小、高楠 译MDN WEB Docs:not() 描…

华为OD机试用Python实现 -【字符串重新排序】(2023-Q1 新题)

华为OD机试题 华为OD机试300题大纲字符串重新排序题目描述输入描述输出描述示例一输入输出示例二输入输出Python 代码实现算法思路华为OD机试300题大纲 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD 清单查看地址:blog.csdn.…

JavaEE|TCP/IP协议栈之TCP协议工作机制下

文章目录一、滑动窗口二、流量控制三、拥塞控制四、延时应答五、捎带应答六、面向字节流(了解)七、异常情况(了解)关于其他传输层协议一、滑动窗口 为什么要引入滑动窗口? 确认应答和超时重传为TCP可靠传输机制提供支持…

FTP中的TCP传输服务(电子科技大学TCP/IP实验五)

目录 一.实验目的 二.预备知识 三.实验原理 四.实验内容 五.实验步骤 八、总结及心得体会 九、对本实验过程及方法、手段的改进建议 一.实验目的 1、掌握 TCP 协议工作原理 2、掌握 TCP 的连接建立…

阿里团队刚发布的重磅图像生成基础模型,多重条件引导+图像合成,SD级别,5B参数...

一个多小时前刚发的论文,Composer: Creative and Controllable Image Synthesis with Composable Conditions。 我读完了快速帮大家概要一下啊。论文地址见文章最后。阿里巴巴团队开发的这个重磅图像生成模型 Compose,支持多重引导条件的图像生成(合成)&…

containerd安装配置

containerd基本使用命令 containerd安装 容器运行时containerd安装配置 https://blog.csdn.net/rendongxingzhe/article/details/124595415 yum list | grep containerd containerd的本地CLI工具ctr命令 containerd的组件 containerd提供包括容器的运行、测试、发布和接口…

improve-1

类型及检测方式 1. JS内置类型 JavaScript 的数据类型有下图所示 其中,前 7 种类型为基础类型,最后 1 种(Object)为引用类型,也是你需要重点关注的,因为它在日常工作中是使用得最频繁,也是需要…

DevOps是什么?DevOps能够给我们带来什么?

目录专栏导读一、DevOps是什么?二、为什么会出现DevOps?1、容器化技术的发展,微服务架构的发展,直接促进了DevOps的迅速发展2、敏态需求的增加,即探索性工作的增加3、软件开发活动在企业经营活动中占比的不断增加4、企…

【华为OD机试模拟题】用 C++ 实现 - 水仙花数(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 获得完美走位(2023.Q1) 文章目录 最近更新的博客使用说明水仙花数题目输入输出描述示例一输入输出说明示例二输入输出Code使用说明 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。…

【华为OD机试模拟题】用 C++ 实现 - 获得完美走位(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 货币单位换算(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 选座位(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 停车场最大距离(2023.Q1) 【华为OD机试模拟题】用 C++ 实现 - 重组字符串(2023.Q1) 【华为OD机试模…

基于stm32计算器设计

这里写目录标题 完整de代码可q我获取1 系统功能设计2 系统硬件系统分析设计2.1 STM32单片机核心电路设计2.2 LCD1602液晶显示模块电路设计2.3 4X4矩阵键盘模块设计3 STM32单片机系统软件设计3.1 编程语言选择3.2 Keil程序开发环境3.3 FlyMcu程序烧录软件介绍3.4 CH340串口程序烧…

【华为OD机试模拟题】用 C++ 实现 - 最近的点(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 获得完美走位(2023.Q1) 文章目录 最近更新的博客使用说明最近的点题目输入输出示例一输入输出Code使用说明 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,通过率才会高。 华为 OD 清单查看地址…

【基础篇0】Linux下ANACONDA与TF-LITE环境配置

0 写在前面:一些摸索与总结 对于Linux系统,我发现不管是电脑x86的Ubuntu还是树莓派arm的raspberry系统,在系统安装完毕后,总是自带一个特定版本的python.   例如我的ubuntu22.04自带的python版本是3.10,而高版本的py…

Vue3之组件

何为组件 组件化的概念已经提出了很多年了,但是何为组件呢?组件有啥优势?本文将会做出解答,首先我们需要弄清楚何为组件。在VUE的官网中的解释是: 组件允许我们将 UI 划分为独立的、可重用的部分,并且可以对…

Android 基础知识4-3.2 EditText(输入框)详解

一、EditText(输入框)介绍 EditText在开发中也是经常使用的控件,比如,要实现一个登录页面,需要用户输入账号、密码等信息,然后我们或得用户输入的内容,把它交给服务器来判断。因此,这…