Vue - 全局组件传值（Vuex）

已于 2023-05-10 16:49:03 修改
阅读量2.4k 收藏 18
点赞数 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>
风轻轻~
关注
  • 6
    点赞
  • 踩
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vuex传值
Make Excellence a Habit
09-04 1619
vue中各个组件之间传值比较 1.父子组件 父组件–>子组件，通过子组件的自定义属性：props 子组件–>父组件，通过自定义事件：this.$emit(‘事件名’,参数1,参数2,…); 缺点：用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。 2.非父子组件或父子组件 通过数据总数Bus，this.root. root.root.emit(‘事件名’...
如何用vuex实现传值
逐梦十年的博客
07-29 2320
分5步 1.在store文件夹下的modules文件夹下的setting.js文件下赋值。赋值位于state下，默认为空，也可以自定义赋值 const state = { // title: 'title', showSettings: showSettings, fixedHeader: fixedHeader, sidebarLogo: sidebarLogo, entitytype: "", id:"", formdata:"" } 2.在store文件夹下的ge
基于vue3的花瓣飘落效果源码.zip
05-18
基于vue3的花瓣飘落效果源码
vuex 基础知识 (跨组件传值)
Tianxiaoxixi的博客
08-08 2850
vuex 基础知识 (跨组件传值)
Vue组件传值的六种方法
最新发布
li826827的博客
05-24 487
父子组件通信: props；ref；兄弟组件通信: eventBus；vuex跨级通信: eventBus；Vuex；
简单的Vuex传值运用
qq_45384482的博客
08-29 747
文章目录什么是Vuex？图解Vuex各组件vuex使用步骤安装创建store模块Vuex取值Vuex存值Vuex异步加载代码示例 什么是Vuex？ 官方图解Vuex 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库”（数据仓 库）， 让其在各个页面上实现数据的共享包括状态，并且可操作。 1、vue中各个组件之间传值 1.父子组件 父组件–>子组件，通过子组件的自定义属性：props 子组件–>父组件，通过自定义事件：this.$emit(‘事
vue组件通信（传值）
weixin_66293685的博客
08-14 928
vue组件通信方式
从0开始探究vue-组件化-组件之间传值
01-08
6. **Vuex**：对于复杂应用，推荐使用 Vuex 管理全局状态，提供集中式存储和统一的修改方式，确保数据的一致性和响应性。 组件化是 Vue.js 的核心优势，它极大地提高了代码的复用性和可维护性。理解并熟练运用组件...
Vue 组件间传值及事件触发Demo
09-07
4. `Vuex` 状态管理：当组件间通信变得复杂时，可以引入Vuex作为全局状态管理工具。在Vuex中，所有组件共享同一状态，并通过actions、mutations和getters来操作和获取数据。 二、组件事件回调 1. 自定义事件：如上...
详解vue-router和vue-cli以及组件之间的传值
08-30
此外，还可以通过非父子组件间的通信工具，如 Vuex（状态管理）或事件总线（EventBus）来实现组件间的通信。 总结，Vue Router 负责页面路由，Vue CLI 提供了快速构建项目的框架，而组件间的通信则是 Vue.js 开发中...
vue.js 传值方法（父子组件传值、非父子组件传值）
01-08
**一、父子组件传值** 1. **父组件向子组件传递值** - 基本原理：使用`props`属性从父组件向子组件传递数据。 - 步骤： - 在父组件中导入并注册子组件，例如： ```javascript import HomeChild from './...
vue父组件给子组件传值
12-21
下面我们将详细探讨如何在Vue中实现父组件给子组件传值。 1. **Props定义**： 在Vue中，子组件通过props属性接收父组件传递的数据。在子组件的选项对象中，我们需要定义一个props数组，列出所有期望接收的属性名。...
Vue—组件传值及vuex的使用
jz1234_的博客
10-20 1385
在通信中，无论是子组件向父组件传值还是父组件向子组件传值，他们都有一个共同点就是有中间介质，子向父的介质是自定义事件，父向子的介质是props中的属性。在父组件中注册子组件，并在template中加入子组件标签，标签中添加img-src属性并赋值\。在响应该点击事件的函数中使用$emit来触发一个自定义事件，并传递一个参数。在父组件中的子标签中监听该自定义事件并添加一个响应该事件的处理方法。在子组件中创建一个按钮，给按钮绑定一个点击事件。在组件中使用mutations中对应的方法。此时可以在组件中使用。
Vuex传值简单运用
licmi的博客
08-27 1525
Vuex传值简单运用什么是Vuexvue中各个组件之间传值官方图解VuexVuex中的各个js文件的用途vuex使用步骤取值案例(同步取值)效果异步与同步的区别Actions获取this测试Action类似于 mutation，不同在于 什么是Vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。 官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。可以想象为一个“前端数据库
Vuex 实现组件传值
qq_45164496的博客
06-17 1018
Vuex 是什么？ Vuex 类似于一个“前端数据库”，让各个页面的数据实现共享。简单来说Vuex就像一个商店，各个页面需要什么数据就去商店找 如下：要实现两个页面的数据传值。 首页和城市列表页，当点击列表的某个城市，比如武汉，会跳转到首页，首页城市由上海更改为武汉。 具体实现： （1）在src目录，新建一个store目录，store里再新建一个index.js文件 （2）在入口文件main.js中挂载 store，使store可以被全局访问 （3）终端下载vuex，并在store目录下的index.
简述 Vuex 的数据传递流程
weixin_58089129的博客
11-10 2078
vuex数据传递的流程我觉得为以下几个步骤： 第一步：通过new Vuex.Store()创建一个仓库 state是公共的状态，state--->components渲染页面 第二步：在组件内部通过this.$store.state.属性 来调用公共状态中的state，进行页面的渲染。 第三步：当组件需要修改数据的时候，必须遵循单向数据流。通过this.$store.dispatch来触发actions中的方法 第四步:actions中的每个方法都会接受一个对象 这个对象里面有一个comm
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、付费专栏及课程。

余额充值