Vue3 Vuex状态管理多组件传递数据简单应用

去官网学习→安装 | Vuex

cd 项目 安装 Vuex: npm install --save vuex

或着 创建项目时勾选Vuex         vue create vue-demo

? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert
selection, and <enter> to proceed)
 (*) Babel
 ( ) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
>(*) Vuex
 ( ) CSS Pre-processors
 ( ) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

运行示例:

 

 Vuex代码:store/index.js

// 引用 Vuex
import { createStore } from 'vuex'
// 引用 axios 网络请求 安装 cnpm install --save axios
import axios from 'axios';

//导出      在main.js 引用
export default createStore({
  //状态管理  通用的数据    数据改变时,组件中引用到此数据的内容都会发生改变
  state: {
    name:"张三丰",
    age: 198
  },
  //获取state中的数据  进行数据校验
  getters: {
    //自定义个方法 ,进行数据校验
    getAge(state){
      return state.age < 200 ? state.age: "张三丰只能活到200岁";
    }
  },
  //用于 更改state中的数据
  mutations: {
      //自定义个方法 ,进行数据修改 自定义参数numb
    addAge(state,numb){
      state.age +=numb;
    }
  },
  //Action 提交的是 mutation,而不是直接变更状态。
  //Action 可以包含任意异步操作。
  actions: {
       //自定义个方法 ,获取网络数据 进行数据修改 自定义参数numb
       asyncAddage({commit}){
        //http://www.csdnts.com/getTestData.jspx  域名是假的,后台接口已经处理了跨域问题
        //接口数据:[{"name":"张三丰","sex":"男","age":25},{"name":"周芷若","sex":"女","age":22}]
        axios.get("http://www.csdnts.com/getTestData.jspx")
        .then(res =>{
          console.log(res.data);
          //调用 mutations中 addAge方法  每次+25
          commit("addAge",(res.data[0]).age)
        })
        .catch(err =>{
          console.log(err);
        })
      }
  },
  //模块化管理vuex 允许我们将 store 分割成模块(module)。
  //每个模块拥有自己的 state、mutation、action、getter、
  //甚至是嵌套子模块——从上至下进行同样方式的分割
  modules: {
  }
})

代码:HelloWorld.vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <!-- $store.state -->
    <p>方式一 state中的name->{{$store.state.name}}</p>
    <p>方式一 state中的age->{{$store.state.age}}</p>

    <!-- $store.getters -->
    <p>方式一 getters中的getAge()->{{$store.getters.getAge}}</p>

    <hr>
    <p>方式二 state中的name->{{name}}</p>
    <p>方式二 state中的age->{{age}}</p>

    <p>方式二 getters中的getAge()->{{getAge}}</p>

    <button @click="onClickaddAge">更改年龄数据</button>
    <button @click="asynconClickaddAge">获取网络数据更改年龄</button>
  </div>
</template>

<script>
//方式二 import  mapState
import { mapState } from 'vuex';
//方式二 import  mapGetters
import { mapGetters } from 'vuex';

// import  mapMutations
import { mapMutations } from 'vuex';
//  import  mapActions
import { mapActions } from 'vuex';

export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  //computed  
  computed:{
    //State 简化写法
    ...mapState(["name","age"]),
    //getters 
    ...mapGetters(["getAge"]),

  },
  methods:{
    //mutations 简化写法
    ...mapMutations(["addAge"]),
    onClickaddAge(){
      //this.$store.commit 调用getAge 参数 20
     // this.$store.commit("addAge",20)

     this.addAge(1);
    },
    //actions
    ...mapActions(["asyncAddage"]),
    asynconClickaddAge(){
      // this.$store.dispatch()  调用 asyncAddage()
      //this.$store.dispatch("asyncAddage")

      this.asyncAddage();
    }


  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

代码:main.js

import { createApp } from 'vue'
import App from './App.vue'
import './registerServiceWorker'
//router
import router from './router'
//vuex
import store from './store'

//.use(store)
createApp(App).use(store).use(router).mount('#app')

代码:AboutView.vue

<template>
  <div class="about">
    <h1>关于-页面</h1>
    <!-- $store.state    直接引用  -->
    <p>方式一 state中的name->{{ $store.state.name }}</p>
    <p>方式一 state中的age->{{ $store.state.age }}</p>

    <!-- $store.getters -->
    <p>方式一 getters中的getAge()->{{$store.getters.getAge}}</p>

    <hr>
    <p>方式二 state中的name->{{name}}</p>
    <p>方式二 state中的age->{{age}}</p>
  </div>
</template>

<script>
//方式二 imper  mapState
import { mapState } from 'vuex';

export default {
  name: 'AboutView',
  //computed   获取State 中数据
  computed:{
    ...mapState(["name","age"])
  }
}
</script>

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

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

相关文章

Web3 solidity订单池操作

前面一篇文章因为一些原因 被设为了进自己可见 需要的朋友可以私信我 之前 我们编写的程序上来看 交易所无非是一个代币的托管上 只是它会更加专业 本文 我们继续来看交易所的一个功能 叫游泳池 例如 我们 100grToken 兑换 1ETH 前提 我们的代币已经能被估值了 例如 你想用人…

【JVM】如何判定一个对象已死以及“标记-清除”、“标记-复制”、“标记-整理”三种垃圾收集算法

文章目录 0、如何判定一个对象的生死&#xff1f;1、上文提到的引用又是什么1、强引用&#xff1a;2、软引用&#xff1a;3、弱引用&#xff1a;4、虚引用&#xff1a; 2、垃圾收集算法1、标记-清除2、标记-复制优化&#xff1a;&#x1f447; 3、标记-整理 0、如何判定一个对象…

item_password-获得淘口令真实url

一、接口参数说明&#xff1a; item_password-获得淘口令真实url &#xff0c;点击更多API调试&#xff0c;请移步注册API账号点击获取测试key和secret 公共参数 请求地址: https://api-gw.onebound.cn/taobao/item_password 名称类型必须描述keyString是调用key&#xff08…

用cpolar生成的公网地址,对位于本地的Cloudreve网盘进行访问

文章目录 1、前言2、本地网站搭建2.1 环境使用2.2 支持组件选择2.3 网页安装2.4 测试和使用2.5 问题解决 3、本地网页发布3.1 cpolar云端设置3.2 cpolar本地设置 4、公网访问测试5、结语 1、前言 自云存储概念兴起已经有段时间了&#xff0c;各互联网大厂也纷纷加入战局&#…

Springboot集成ip2region离线IP地名映射-修订版

title: Springboot集成ip2region离线IP地名映射 date: 2020-12-16 11:15:34 categories: springboot description: Springboot集成ip2region离线IP地名映射 1. 背景2. 集成 2.1. 步骤2.2. 样例2.3. 响应实例DataBlock2.4. 响应实例RegionAddress 3. 打开浏览器4. 源码地址&…

米尔瑞萨RZ/G2L开发板-02 ffmpeg的使用和RTMP直播

最近不知道是不是熬夜太多&#xff0c;然后记忆力减退了&#xff1f; 因为板子回来以后我就迫不及待的试了一下板子&#xff0c;然后发现板子有SSH&#xff0c;但是并没有ffmpeg&#xff0c;最近总是在玩&#xff0c;然后今天说是把板子还原一下哇&#xff0c;然后把官方的固件…

Beats:安装及配置 Metricbeat (一)- 8.x

在我之前的文章&#xff1a; Beats&#xff1a;Beats 入门教程 &#xff08;一&#xff09;Beats&#xff1a;Beats 入门教程 &#xff08;二&#xff09; 我详细描述了如何在 Elastic Stack 7.x 安装及配置 Beats。在那里的安装&#xff0c;它通常不带有安全及 Elasticsearc…

Redis - 数据类型映射底层结构

简介 从数据类型上体现就是&#xff0c;同一个数据类型&#xff0c;在不同的情况下会使用不同的编码类型&#xff0c;底层所使用的的数据结构也不相同。 字符串对象 字符串对象的编码可以是 int、raw 和 embstr 三者之一。 embstr 编码是专门用于保存简短字符串的一种优化编…

Docker查看、创建、进入容器相关的命令

1.查看、创建、进入容器的指令 用-it指令创建出来的容器&#xff0c;创建完成之后会立马进入容器。退出之后立马关闭容器。 docker run -it --namec1 centos:7 /bin/bash退出容器&#xff1a; exit查看现在正在运行的容器命令&#xff1a; docker ps查看历史容器&#xff0…

解决Java中的“Unchecked cast: java.lang.Object to java.util.List”问题

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

嵌入式系统中如何选择RTC电池?

RTC&#xff08;Real Time Clock&#xff09;是一种用于提供系统时间的独立定时器&#xff0c;它可以在系统断电或低功耗模式下继续运行&#xff0c;只需要一个后备电池作为供电源。在嵌入式系统中&#xff0c;选择合适的RTC电池时非常关键的&#xff0c;它会影响系统时间的准确…

CSS自己实现一个步骤条

前言 步骤条是一种用于引导用户按照特定流程完成任务的导航条&#xff0c;在各种分步表单交互场景中广泛应用。例如&#xff1a;在HIS系统-门诊医生站中的接诊场景中&#xff0c;我们就可以使用步骤条来实现。她的执行步骤分别是&#xff1a;门诊病历>遗嘱录入>完成接诊…

【设计模式】装饰器模式

装饰器模式&#xff08;Decorator Pattern&#xff09;允许向一个现有的对象添加新的功能&#xff0c;同时又不改变其结构。这种类型的设计模式属于结构型模式&#xff0c;它是作为现有的类的一个包装。 装饰器模式通过将对象包装在装饰器类中&#xff0c;以便动态地修改其行为…

Gitlab CI/CD笔记-第二天-主机套接字进行构建并push镜像。

一、安装gitlab-runner 1.可以是linux也可以是docker的 2.本文说的是docker安装部署的。 二、直接上.gitlab-ci.yml stages: # List of stages for jobs, and their order of execution - build-image build-image-job: stage: build-image image: harbor.com:543/docke…

【Java转Go】快速上手学习笔记(三)之基础篇二

【Java转Go】快速上手学习笔记&#xff08;二&#xff09;之基础篇一 了解了基本语法、基本数据类型这些使用&#xff0c;接下来我们来讲数组、切片、值传递、引用传递、指针类型、函数、map、结构体。 目录 数组和切片值传递、引用传递指针类型defer延迟执行函数map结构体匿名…

【仿写框架之仿写Tomact】四、封装HttpRequest对象(属性映射http请求报文)、HttpResponse对象(属性映射http响应报文)

文章目录 1、创建HttpRequest对象2、创建HttpResponse对象 1、创建HttpRequest对象 HttpRequest对象中的属性与HTTP协议中的内容对应&#xff0c;用于后序servlet从request中获取请求中的参数。 参照http请求报文&#xff1a; import java.io.BufferedReader; import java…

2023年国赛数学建模思路 - 案例:最短时间生产计划安排

文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 最短时…

FreeModbus——介绍(二)

1.简介 freemodbus_百度百科 (baidu.com) &#xff1a;参考自百度百科&#xff0c;里面还有移植介绍&#xff0c;非常详细 1. FreeMODBUS是一个奥地利人写的Modbus协议。它是一个针对嵌入式应用的一个免费&#xff08;自由&#xff09;的通用MODBUS协议的移植。 2. FreeMOD…

【Linux】模拟实现linux的shell

#include <stdio.h> #include <unistd.h> #include <string.h> #include <stdlib.h> #include <sys/wait.h> #include <sys/types.h> #define NUM 1024 #define SIZE 32 #define SEP " " int main() {//保存输入后的字符串char …

夏威夷等全球多地深陷「末日狂烧」,关键时刻 AI 监测能否跑赢野火?

内容一览&#xff1a;当地时间 8 月 8 日&#xff0c;美国夏威夷州突发野火&#xff0c;当地居民和游客不得不跳入太平洋中躲避火势。截至 8 月 17 日&#xff0c;这场野火已经造成110 人死亡&#xff0c;超过 1000人失踪。与此同时&#xff0c;美国、加拿大、法国等地也正遭遇…