Vue - 全局组件传值（Vuex）

已于 2023-05-10 16:49:03 修改
阅读量2.5k 收藏 20
点赞数 6
分类专栏： # Vue__组件之间传值 文章标签： Vuex vue.js
于 2020-07-14 09:59:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jie_1997/article/details/107228246
版权

Vuex的使用

一. Vuex 是什么？

Vuex是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享。

二. 使用 Vuex 统一管理状态的好处

  1. 能够在vuex中集中管理共享的数据，易于开发和后期维护。
  2. 能够高效的实现组件之间的数据共享，提高开发效率。
  3. 存储在vuex中的数据都是响应式的，能够实时保持数据与页面的同步。

三. 什么样的数据适合存储到 Vuex 中

一般情况，只有组件之间共享的数据，才有必要存储到vuex中；对于组件中的私有数据，依旧存储在组件自身的data中即可。

四. Vuex 的基本使用

  1. 安装vuex依赖包
    npm install vuex --save

  2. src 目录下创建 store.js 文件
    在这里插入图片描述

  3. 配置 store.js 文件
    在这里插入图片描述

    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //state中存放的就是全局共享的数据
  state: {
    count: 0
  },
  mutations: {},
  actions: {}
})

  4. main.js 中导入 store.js

    import Vue from "vue";
import App from "./App.vue";
import router from "./router";
// 引入store
import store from "./store";
Vue.prototype.$store = store;

Vue.config.productionTip = false;

new Vue({
  el: "#app",
  router,
  components: { App },
  template: "<App/>",
  store,
});

五. Vuex 的核心概念

Vuex中的主要核心概念如下：

  • State
  • Mutation
  • Action
  • Getter

5.1 State

  • State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储。

5.1.1 store.js 中创建store数据源，提供唯一公共数据：

export default new Vuex.Store({
	State:{
		//创建store数据源，提供唯一公共数据
		count:0
	}
})

5.1.2 组件访问 State 中数据的两种方式

  • 第一种方式：
    this.$store.state.全局数据名称
    this.$store.state.count
  • 第二种方式：
    //1.使用vuex的组件中，从vuex中按需导入mapState函数
import { mapState } from 'vuex'
    通过导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：
    //2.将全局数据，映射为当前组件的 计算属性，这里的全局数据为count
computed:{
	...mapState(['count'])
}

5.2 Mutations

  • Mutation 用于变更 Store 中的数据。
  • 只能通过mutation 变更 Store 数据，不可以直接操作Store中的数据。
  • 通过这方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。
  • 只有 mutations 中定义的函数，才有权力修改 state 中的数据。
  • 在 Mutations 中，不可执行异步操作，只允许写同步的代码。

5.2.1 触发 Mutations 修改数据的两种方法

  • store.js 中定义 Mutations

    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state:{
		count:0
	},
	mutation:{
		//变更Store中的数据状态的方法
		add(state) {
	      state.count++
	    },
	    sub(state) {
	      state.count--
	    },
	    //state:数据存储库；step：参数
	    addN(state, step) {
	      state.count += step
	    },
	    subN(state, step) {
	      state.count -= step
	    }
	}
}

  • 组件中触发 Mutations

  1. 第一种方法
    this.$store.commit('Mutations中的方法名')
    methods：{
	Handle(){
		//调用commit函数执行store中的add方法
		this.$store.commit('add')
	}
}
  2. 第二种方法
    // 1.从vuex中按需导入mapMutations函数
import {mapState,mapMutations} from 'vuex'
    通过导入的 mapMutations 函数，映射为当前组件的 methods 函数：：
    methods:{
    //2.将指定的mapMutations函数，映射为当前组件的methods函数
    ...mapMutations(['add','sub','addN','subN']),
    // 3.使用
    btnhandleOne(){
        this.sub()
    }
}

5.2.2 触发 Mutations 传递 参数 修改数据

  • store.js 中定义 Mutations
    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
	state:{
		count:0
	},
	mutation:{
		//变更Store中的数据状态的方法
		add(state) {
	      state.count++
	    },
	    sub(state) {
	      state.count--
	    },
	    //state:数据存储库；step：参数
	    addN(state, step) {
	      state.count += step
	    },
	    subN(state, step) {
	      state.count -= step
	    }
	}
}
  • 组件中触发 Mutations
  1. 第一种方法
    methods:{
   btnHandlerOne(){
    	//调用commit函数执行store中的addN方法，所传参数为3
        this.$store.commit('addN',3)
    }
}
  2. 第二种方法
    // 1.从vuex中按需导入mapMutations函数
import {mapState,mapMutations} from 'vuex'
    通过导入的 mapMutations 函数，映射为当前组件的 methods 函数：
    methods:{
    //2.将指定的mapMutations函数，映射为当前组件的methods函数
    ...mapMutations(['add','sub','addN','subN']),
    // 3.使用
    btnHandleTwo(){
        this.subN(3)
    }
}

5.3 Actions

  • Action 可以处理任意异步操作。
  • 如果通过异步操作变更数据，必须通过 Action ，而不能使用 Mutations ,但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据。
  • 在 action 中，不能直接修改 state 中的数据，必须通过 context.commit() 触发 mutations 才行。

5.3.1 通过异步操作变更数据的两种方法

  • store.js 中定义 Actions

    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //state中存放的就是全局共享的数据
  state: {
    count: 0
  },
  //只有mutations中定义的函数，才有权力修改state中的数据。
  mutations: {
    add(state) {
      state.count++
    },
    //state:数据存储库；step：参数
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    }
  },
  //在action中，不能直接修改state中的数据。
  //必须通过context.commit()触发mutations才行
  actions: {
      //context: Vuex实例对象
      addAsync(context){
        setTimeout(()=>{
            //通过commit触发mutations中的方法
            context.commit('add')
        },1000)
      },
      addNAsync(context,step){
        setTimeout(()=>{
    	  //通过commit触发mutations中的方法
          context.commit('addN',step)
        },1000)
      },
      subAsync(context){
        setTimeout(()=>{
            //通过commit触发mutations中的方法
            context.commit('sub')
        },1000)
      },
      subNAsync(context,step){
        setTimeout(()=>{
            //通过commit触发mutations中的方法
            context.commit('sub',step)
        },1000)
      },
  }
})

  • 组件中触发 Actions

  1. 第一种方法
    methods:{
     btnHandlerThree(){
         //这里的dispatch函数，用来触发action
         this.$store.dispatch('addAsync')
     }
 }
  2. 第二种方法
    // 1.从vuex中按需导入mapActions函数
import {mapState,mapMutations,mapActions} from 'vuex'
    通过导入的 mapActions 函数，映射为当前组件的 methods 函数
    methods:{
     //2.将指定的mapMutations函数，映射为当前组件的methods函数
     ...mapActions(['addAsync','addNAsync','subAsync','subNAsync']),
     // 3.使用
     btnhandleThree(){
         this.subAsync()
     },
 }

5.3.2 触发actions异步任务时携带 参数

  • store.js 中定义 Actions
    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //state中存放的就是全局共享的数据
  state: {
    count: 0
  },
  //只有mutations中定义的函数，才有权力修改state中的数据。
  mutations: {
    add(state) {
      state.count++
    },
    //state:数据存储库；step：参数
    addN(state, step) {
      state.count += step
    },
    sub(state) {
      state.count--
    },
    subN(state, step) {
      state.count -= step
    }
  },
  //在action中，不能直接修改state中的数据。
  //必须通过context.commit()触发mutations才行
  actions: {
      //context: Vuex实例对象
      addAsync(context){
        setTimeout(()=>{
            //通过commit触发mutations中的方法
            context.commit('add')
        },1000)
      },
      addNAsync(context,step){
        setTimeout(()=>{
    	  //通过commit触发mutations中的方法
          context.commit('addN',step)
        },1000)
      },
      subAsync(context){
        setTimeout(()=>{
            //通过commit触发mutations中的方法
            context.commit('sub')
        },1000)
      },
      subNAsync(context,step){
        setTimeout(()=>{
            //通过commit触发mutations中的方法
            context.commit('sub',step)
        },1000)
      },
  }
})
  • 触发 actions
  1. 第一种方法
    methods:{
	HandlerFour(){
        this.$store.dispatch('addNAsync',5)
    }
}
  2. 第二种方法
    // 1.从vuex中按需导入mapActions函数
import {mapState,mapMutations,mapActions} from 'vuex'
    通过导入的 mapActions 函数，映射为当前组件的 methods 函数
    methods:{
     //2.将指定的mapMutations函数，映射为当前组件的methods函数
     ...mapActions(['addAsync','addNAsync','subAsync','subNAsync']),
     // 3.使用
     btnhandleFour(){
        this.subNAsync(5)
    }
 }

5.4 Getters

  • Getter 用于对 Store 中的数据进行加工处理形成新的数据。
  • Getter 可以对 Store 中已有的数据进行加工处理之后形成新的数据，类似 Vue 的计算属性。
  • Store 中的数据发生变化，Getter 的数据也会跟着变化。

5.4.1 使用 Getters 的两种方法

  • store.js 中定义 Getters
    import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  //state中存放的就是全局共享的数据
  state: {
    count: 0
  },
  getters:{
    showNumber(state){
      return '最新数据：'+ state.count +''
    }
  }
})
  • 触发 Getters
  1. 第一种方法
    this.$store.getters.名称
    this.$store.getters.showNumber
  2. 第二种方法
    // 1.从vuex中按需导入 mapGetters 函数
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
    通过导入的 mapGetters 函数，映射为当前组件的 computed 计算属性
    computed:{
	//2.将指定的mapGetters函数，映射为当前组件的 计算属性
	...mapGetters(['showNumber']),
},

    <template>
  <div>
    <!-- 使用 store.js 中 getters 的 showNumber -->
    <h3>{{showNumber}}</h3>
  </div>
</template>
风轻轻~
关注
专栏目录
Vue组件化(全局、局部)、props传参
chijiajing的博客
09-23 2795
目录 全局组件化 带参数传递的全局组件化(props方式) 局部组件化 带参数传递的局部组件化(props方式) 自定义组件使用注意 全局组件化 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&
最详细的Vuex教程
weixin_30325487的博客
07-19 1468
原文链接http://blog.csdn.net/h5_queenstyle12/article/details/75386359 最详细的Vuex教程 什么是Vuex？ vuex是一个专门为vue.js设计的集中式状态管理架构。状态？我把它理解为在data中的属性需要共享给其他vue组件使用的部分，就叫做状态。简单的说就是data中需要共用的属性。 引入Vuex（前提是...
Vue组件间传参（全局事件总线）
最新发布
qq_50187801的博客
09-30 73
需要发起传参的组件使用 （this.$bus.$emit）发送要传递的参数。组件接收事件总线传参（this.$bus.$on）在使用$on的组件中使用$off解绑对应监听事件。在main.js文件中安装全局事件总线。
Vuex传值
qq_45179408的博客
09-04 2206
Vuex中的各个js文件的用途 变量传值的演变形式 这是之前博客中出现的两种vue的传值方式 图解Vuex 举个例子，有A和B两个组件，当A传值到B时就可以将变量定义到state中去，从而解决组件过多导致忘记变量的情况，然后通过getters和mutations进行数据的拿取 vue中各个组件之间传值（第一张图） 1.父子组件 父组件–>子组件，通过子组件的自定义属性：props ...
使用VUEX组件传值
weixin_45537155的博客
09-03 384
1.先安装vuex,执行 npm install vuex --save代码，安装vuex 2.在main.js文件中导入vuex，代码如下： import vuex from 'vuex' Vue.use(vuex) 3.在根目录下创建文件夹：vuex,然后添加store.js文件，store.js文件代码如下： import vue from 'vue' import Vuex from 'vuex' vue.use(Vuex) const state={ changeMenuNewsList
vuex传值
m0_59324574的博客
11-29 971
vuex基本的组件
vuex 基础知识 (跨组件传值)
Tianxiaoxixi的博客
08-08 2917
vuex 基础知识 (跨组件传值)
从0开始探究vue-组件化-组件之间传值
01-08
6. **Vuex**：对于复杂应用，推荐使用 Vuex 管理全局状态，提供集中式存储和统一的修改方式，确保数据的一致性和响应性。 组件化是 Vue.js 的核心优势，它极大地提高了代码的复用性和可维护性。理解并熟练运用组件...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
详解vue-router和vue-cli以及组件之间的传值
08-30
此外，还可以通过非父子组件间的通信工具，如 Vuex（状态管理）或事件总线（EventBus）来实现组件间的通信。 总结，Vue Router 负责页面路由，Vue CLI 提供了快速构建项目的框架，而组件间的通信则是 Vue.js 开发中...
Vue 组件间传值及事件触发Demo
09-07
4. `Vuex` 状态管理：当组件间通信变得复杂时，可以引入Vuex作为全局状态管理工具。在Vuex中，所有组件共享同一状态，并通过actions、mutations和getters来操作和获取数据。 二、组件事件回调 1. 自定义事件：如上...
VUE使用vuex解决模块间传值问题的方法
08-30
本篇文章主要介绍了VUE使用vuex解决模块间传值问题 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue组件传值存在的弊端-Vuex状态管理
m0_57887428的博客
07-10 579
vue组件传值在应用中存在的不足之处，vuex提出的应用背景
Vuex组件传值详解
weixin_43477950的博客
11-27 2432
一、 Vuex 1、简介 Vuex是实现组件全局状态(数据)管理的一种机制，可以方便的实现组件之间数据的共享。 ①能够在vuex中集中管理共享的数据，易于开发和后期维护 ②能够高效地实现组件之间的数据共享， 提高开发效率 ③存储1在vuex中的数据都是响应式的,能够实时保持数据与页面的同步 一般情况下，只有组件之间共享的数据，才有必要存储到vuex中;对于组件中的私有数据，依旧存储在组件自身的data中即可。 2、核心概念 1、定义store对象 //（1）.安装vuex依赖包 npm instal
Vuex 实现组件传值
qq_45164496的博客
06-17 1065
Vuex 是什么？ Vuex 类似于一个“前端数据库”，让各个页面的数据实现共享。简单来说Vuex就像一个商店，各个页面需要什么数据就去商店找 如下：要实现两个页面的数据传值。 首页和城市列表页，当点击列表的某个城市，比如武汉，会跳转到首页，首页城市由上海更改为武汉。 具体实现： （1）在src目录，新建一个store目录，store里再新建一个index.js文件 （2）在入口文件main.js中挂载 store，使store可以被全局访问 （3）终端下载vuex，并在store目录下的index.
vue全局组件-父子组件传值
aidanpi5094的博客
03-06 222
全局组件注册方式：Vue.component(组件名,{方法}) demo: 子组件：upload.vue <template> <div > <div class="file_box"> <input type="file" v-on:change="upload">点击上传 </di...
使用VueX实现组件传值
limmt2020的博客
09-01 1979
使用VueX实现组件传值 1、什么是Vuex vuex是专门帮助所有组件维护共享数据的公共区域，只要一个数据，有可能被多个组件使用，都可以通过vuex来管理。 2、获取仓库数据，在页面上显示 1、创建脚手架时，选择vuex选项，一起安装 在脚手架项目src文件夹中存在store文件夹以及index.js文件 2、在store文件夹中，创建数据 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vu
vue自定义插件(全局组件),以及向插件传值
musi_m的博客
03-26 2218
1 编写子组件 load.vue内容 <template> <div> Load... </div> </template> <script></script> <style> </style> Tree.vue内容: <template> <di...
vue2同级组件传值
09-13
在Vue 2中，同级组件之间传递值可以通过以下几种方式实现： 1. 使用一个共享的父组件作为中介：可以在父组件中定义一个数据属性，并将该属性传递给同级组件。同级组件可以通过props接收该属性，并进行使用。当同级组件需要更新值时，可以通过事件将新的值传递给父组件，然后再由父组件将新值传递给其他同级组件。 2. 使用事件总线：创建一个全局的Vue实例作为事件总线，可以在其中定义需要共享的数据属性，以及相关的getter和setter方法。各个同级组件通过订阅和发布事件的方式来获取和更新共享的数据。 3. 使用Vuex：Vuex是Vue官方提供的状态管理库，可以用于在不同组件之间共享数据。可以在Vuex中定义需要共享的数据，然后通过Vuex提供的API来获取和更新数据。各个同级组件可以从Vuex中获取数据，并通过提交mutations的方式来修改数据。 这些方法都可以实现同级组件之间的数据传递，具体使用哪种方式取决于你的项目需求和个人偏好。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值