vue3+vuex4 实现不同组件间数据共享

忘是亡心i 2023-01-17 10:44 147阅读 0赞

## 效果 ##

![在这里插入图片描述][20210428235344933.gif]

## 实现 ##

*  第一步：修改store/index.ts

import { createStore} from 'vuex'
    
    export default createStore({ 
      state: { 
        count: 1000  // 控制菜单展开与折叠
      },
      mutations: { // 同步方法
        add(state, he) {  // 注册事件：唯一修改state.count值的方法
          state.count = state.count + he
          return state.count
        }
      },
      actions: { // 异步方法
        asyncAdd(context, he) {  // 该方法需要通过dispatch()调用
          context.commit("add", he)  // 通过commit方法调用add
        }
      },
      modules: { }
    })

*  Header.vue

<template>
        <button @click="toggleSideBar"></button>
    </template>
    <script lang="ts"> import { useStore} from "vuex"; export default { setup(): any { const store = useStore(); function toggleSideBar() { store.dispatch("asyncAdd", 888); } return { store } } } </script>

*  Aside.vue

<template>
      <div>------------ {
       {store.state.count}}-------------</div>
    </template>
    <script lang="ts"> import { useStore } from 'vuex' export default { setup(): any { const store = useStore() return { store } } } </script>

[20210428235344933.gif]: /images/20221021/fec3839758e045cbb85989a6e1b341a7.png

发表评论取消回复

表情：

评论列表（有 0 条评论，147人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue.js框架--Vuex实现不同组件计数器数据共享（二十七）

主要操作技能：官网：[https://vuex.vuejs.org/zh/][https_vuex.vuejs.org_zh] 一、Vuex 解决不同组件数据共享，数据

- 日理万妓/ 2024年02月19日 12:46/ 0 赞/ 58 阅读

相关 Vuex 数据共享

文章目录前言 Vuex项目的创建 state 配置项 getters 配置项 mutations 配置项

骑猪看日落/ 2023年10月13日 16:14/ 0 赞/ 35 阅读

相关使用Vuex实现数据共享

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

川长思鸟来/ 2023年08月17日 16:27/ 0 赞/ 153 阅读

相关 vue3+vuex4 实现不同组件间数据共享

效果 ![在这里插入图片描述][20210428235344933.gif] 实现第一步：修改store/index.ts import { c

忘是亡心i/ 2023年01月17日 10:44/ 0 赞/ 148 阅读

相关 vue中的共享数据管理---vuex

引言 vuex是关于对vue中一些多个组件共享的数据进行统一集中式管理的方法。在实际的前端开发中，为了减少重复代码的使用，通常我们会把重复使用的代码，封

柔情只为你懂/ 2022年12月30日 13:56/ 0 赞/ 326 阅读

相关 Vue局部组件数据共享Vue.observable()

随着组件的细化，就会遇到多组件状态共享的情况， Vuex当然可以解决这类问题，不过就像 Vuex官方文档所说的，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天我们介绍

悠悠/ 2022年10月10日 12:50/ 0 赞/ 197 阅读

相关 vuex动态注册嵌套module提供模块内部组件间的数据共享

vuex提供了全局性的共享数据。如果数据限于模块内共享，可以采用嵌套module，通过命名空间进行访问。 vue开发的主角是组件。组件在代码解耦、复用、提高可读性方面立下功劳

╰半夏微凉°/ 2022年09月13日 15:21/ 0 赞/ 192 阅读

相关 Vue开发非父子组件间的数据共享、传递、缓存

通过自己的学习Vue开发总结啦分父子组件间的数据共享、传递、缓存等有以下几种方式，工大家参考。 1. Vue的事件广播以及事件的监听具体实现流程如下: ① 定义一个 Vue

比眉伴天荒/ 2022年05月22日 07:09/ 0 赞/ 340 阅读

相关 vue 不同组件之间参数的传递 -> Vuex

之前已经说了global和eventBus的使用，下面来说一下Vuex的使用，如有不妥之处，请指出，谢谢。 1.安装vuex ，命令为： npm i vuex -S

青旅半醒/ 2022年01月09日 15:59/ 0 赞/ 322 阅读

相关 vue项目笔记（19）-使用Vuex实现数据数据共享

使用Vuex实现数据数据共享 City与Home组件没有公共父级组件，要实现共有数据分享，可以借助Vuex。 Vuex基础知识 Vuex是什么呢？

亦凉/ 2021年09月16日 03:08/ 0 赞/ 405 阅读