前端之Vuex

主要解决租价之间传值的问题。

npm install vuex@3/4

在这里插入图片描述

state:用于存储应用程序的状态数据
mutations:用于修改状态数据,外部不要直接对state进行修改。
getter:对状态数据进行处理例如过滤操作。
action:异步操作,网络请求是异步操作,该步骤在action中进行。
module:做数据隔离,针对不同模块下的应用设置不同数据。

具体的使用方法。

①新建一个js文件,里面专门存放State

在这里插入图片描述

import Vue from "vue";
import Vuex from "vuex"
Vue.use(Vuex)


const store = new Vuex.Store({
    state:{
        count:0,
        todos: [
            { id: 1, text: '吃饭', done: true },
            { id: 2, text: '睡觉', done: false }
          ]
    },
    mutations:{
        increment(state,n){
            state.count+=n
        }
    },
    getters:{
        doneTodos:state=>{
            //对于todos数组中每一个元素todo,如果todo.done为true啧该元素增加到新数组中,作为最终的返回。
            //箭头函数,箭头前是参数,箭头后取出箭头前参数的属性
            return state.todos.filter(todo =>todo.done)
        }
    }

})
export default store

创建好以后这个state就是数据仓库了

②在main.js中引入注入这个store机制

import Vue from 'vue'
import App from './App.vue'
import store from "./store/index"

Vue.config.productionTip = false

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

③在组件中调用
注意其中的计算属性中使用...mapState,....mapGetters,以及方法中使用...mapMutations...mapActions就是对四种机制的映射,让我们使用起来更加方面,具体的映射可以看官网

<template>
  <div class="hello">
    {{ count }}
    <button @click="myadd">状态加一</button>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">{{ todo.text }}</li>
    </ul>
  </div>
</template>

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

export default {
  name: 'HelloWorld',
  computed:{
    ...mapState([
      'count',
      "todos"
    ]),
    ...mapGetters([
      "doneTodos"
    ]),
    
  },
  methods:{
    ...mapMutations([
      "increment"
    ]),
    ...mapActions([
      "increment"
    ]),
    myadd(){
      // this.$store.commit("increment",3)
      this.increment(3)
    }
  },
  props: {
    msg: String
  },
  
}
</script>

④module
module是面向不同模块的数据隔离。

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

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

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

相关文章

vue3 依赖-组件tablepage-vue3说明文档,列表页快速开发,使用思路及范例(Ⅱ)搜索及数据获取配置项

搜索及数据获取配置项 搜索及数据获取配置项属性&#xff1a; noSearchModel&#xff08;无表单搜索标识&#xff09;属性&#xff1a;changeToSearch&#xff08;表单change事件是否触发搜索 &#xff09;属性&#xff1a; changeParams&#xff08;参数预处理【可异步】 &…

智慧园区平台再升级!智慧迭代,服务升级

伴随物联网、人工智能等技术的迅速发展和智能化水平的提高&#xff0c;智慧园区成为了现代区域经济高质量发展的重要组成部分&#xff0c;上承智慧城市的建设&#xff0c;下接智慧运营和管理。智慧园区是一种基于信息技术的智能化管理模式&#xff0c;通过物联网、大数据、人工…

Day05-SHELL自动化编程-数组-三剑客进阶

Day05-SHELL自动化编程-数组-三剑客进阶 14 Shell编程-数组14.1 概述14.2 Shell数组赋值14.3 案例14.4 小结 15. Shell-编程-Debug全流程15.1 书写习惯15.2 调试方法 16. 再战三剑客16.1 sed与变量16.2 awk1&#xff09;指哪打哪-案例2&#xff09;awk的判断与循环3&#xff09…

【HDFS存储】Java语言实现

Hadoop生态系统中包含多种与其相关联的技术应用&#xff0c;主要包括但不限于HDFS HDFS&#xff08;Hadoop Distributed File System&#xff09;&#xff1a;作为一个高度可靠、高吞吐量的分布式文件系统&#xff0c;它是Hadoop核心技术之一&#xff0c;用于存储海量数据。 J…

ubuntu如何截图? ubuntu中截屏的三种方法

文章目录 1.ubuntu主要用途2.ubuntu如何截图&#xff1f;2.1 方法一&#xff1a;键盘按键快捷键截屏 2.2 方法二&#xff1a;系统自带软件2.3 方法三&#xff1a;第三方软件 Reference 1.ubuntu主要用途 1、桌面操作系统&#xff1a;Ubuntu可用作个人电脑或笔记本电脑的操作系…

将Ubuntu18.04默认的python3.6升级到python3.8

1、查看现有的 python3 版本 python3 --version 2、安装 python3.8 sudo apt install python3.8 3、将 python3.6 和 3.8 添加到 update-alternatives sudo update-alternatives --install /usr/bin/python3 python3 /usr/bin/python3.6 1 sudo update-alternatives --insta…

【C++】1.从C语言转向C++

目录 一.对C的认识 二.C的关键字 三.命名空间 3.1命名空间的定义 3.2命名空间的使用 四.C的输入与输出 五.缺省参数 5.1全缺省参数 5.2半缺省参数 六.函数重载 七.引用 7.1引用的特性 7.2引用和指针的区别 八.内联函数 九.auto关键字&#xff08;C1…

聚焦价值提升与市场扩张,ATFX任命Ergin Erdemir为拉丁美洲地区负责人

日前&#xff0c;全球知名品牌ATFX宣布一项重磅人事任命&#xff0c;Ergin Erdemir履新拉丁美洲地区负责人。我们相信通过这一重要战略举措&#xff0c;能够加强品牌在全球最具活力地区之一的拉美业务增长的承诺&#xff0c;并巩固品牌在当地的知名度和影响力。 Ergin Erdemi…

【noVNC】使用noVNC实现浏览器远程VNC(基于web的远程桌面)

一、操作的环境 windows 10系统乌班图 Ubuntu 22 二、noVNC 部署方式 原理&#xff1a;开启 Websockify 代理来做 WebSocket 和 TCP Socket 之间的转换 2.1 noVNC和VNC服务端同一台机器 使用方式&#xff0c;查看另一篇博文 &#xff1a;【noVNC】使用noVNC实现浏览器网页访…

锐化空间滤波器--二阶微分图像增强(提高清晰度的另一种方式)

书上一阶微分的定义可以理解&#xff0c;毕竟这里不死数学上的曲线的概念&#xff0c;而是像素点上的曲线。所以&#xff0c;不同于数学的严格单调递增曲线的导数是大于等于零&#xff0c;这里的严格单调递增曲线&#xff0c;只能是大于零。 至于二阶微分的定义&#xff0c;就…

虚拟机中,IP地址查询失败怎么办

有时候ifconfig查出来的地址是下面这样&#xff0c;只有ipv6 只需要运行下面这两条命令&#xff0c;再次查询即可成功&#xff01; systemctl stop NetworkManagersystemctl start network.service

RISC-V特权架构 - 模式切换与委托

RISC-V特权架构 - 模式切换与委托 1 导致模式切换的常见动作2 异常处理规则3 异常处理时模式切换3.1 在U模式下&#xff0c;发生异常3.2 在S模式下&#xff0c;发生异常3.3 在M模式下&#xff0c;发生异常 4 系统调用时模式切换5 中断处理时模式切换 本文属于《 RISC-V指令集基…

第6章 6.3.1 正则表达式的语法(MATLAB入门课程)

讲解视频&#xff1a;可以在bilibili搜索《MATLAB教程新手入门篇——数学建模清风主讲》。​ MATLAB教程新手入门篇&#xff08;数学建模清风主讲&#xff0c;适合零基础同学观看&#xff09;_哔哩哔哩_bilibili 正则表达式可以由一般的字符、转义字符、元字符、限定符等元素组…

三十 超级数据查看器 教程 详情界面的便捷功能

三十 超级数据查看器 教程 详情界面的便捷功能 ​点击此处 以新页面 打开B站 播放当前教学视频 点击访问app下载页面 豌豆荚 下载地址 大家好&#xff0c;今天我们讲一下超级数据查看器的便捷功能。 便捷功能为了在详情界面快速操作 首先&#xff0c;我们打开超级数据查看器&…

Android Studio开发学习(七)———RelativeLayout(相对布局)

在上期中我们对LinearLayout进行了详细的解析&#xff0c;LinearLayout也是我们用的比较多的一个布局,更多的时候更钟情于它的 weight(权重) 属性&#xff0c;等比例划分&#xff0c;对屏幕适配还是 帮助蛮大的;但是使用LinearLayout的时候也有一个问题&#xff0c;就是当界面比…

FPGA在医疗的应用,以4K医疗内窥镜为例

前言 随着技术的发展&#xff0c;医学影像作为科学技术的主要成就之一&#xff0c;在无创诊断和治疗领域已经有了多种应用。其中一个应用是内窥镜&#xff0c;在20世纪90年代&#xff0c;当利用电荷耦合装置将图像传输到显示器上成为可能时&#xff0c;内窥镜变得更加广泛。为…

K8S node节点执行kubectl get pods报错

第一个问题是由第二个问题产生的&#xff0c;第二个问题也是最常见的 网上找的都是从master节点把文件复制过来&#xff0c;这样确实可以解决&#xff0c;但是麻烦&#xff0c;有一个node节点还好&#xff0c;如果有多个呢&#xff1f;每个都复制吗&#xff1f;下面是我从外网…

洛谷-P2089 烤鸡

P2089 烤鸡 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) #include<bits/stdc.h> using namespace std; const int N30; //const int M1e3*310; const int Mpow(3,10); int n; int arr[N]; //存临时方案 int res; //存方案数 int ans[M][N]; //存所有方案//x表示当前到…

会话跟踪技术基础:Cookie和Session

久违了&#xff0c;之前忙碌了一周赶毕设&#xff0c;今天抽空更新~ 一.理论知识 1.会话&#xff1a;用户打开浏览器&#xff0c;访问web服务器的资源&#xff0c;会话建立&#xff0c;直到有一方断开连接&#xff0c;会话结束。在一次会话中可以包含多次请求和响应~ 2.会话跟…

uniapp的h5项目 用命令起这个项目(vue-cli)

这里其实就相当于给uniapp h5套了一个vue-cli的壳&#xff08;纯属个人感觉&#xff09; 首先需要安装vue-cli 脚手架 npm install -g vue/cli然后创建项目&#xff08;这里需要在hbuilder创建&#xff09; vue create -p dcloudio/uni-preset-vue uniapp安装成功后它的结构…