脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → VueX数据共享

VueX如何实现数据共享

 更新时间：2024年08月31日 10:51:56   作者：SixCandy  
这篇文章主要介绍了VueX如何实现数据共享问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

1 VueX

1.1 VueX概述

回顾组件之间共享数据的方式：

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

使用VueX的好处：

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

1.2 VueX的基本使用

  • 安装vuex依赖包
npm i vuex --save
  • 导入vuex包
import Vuex from 'vuex'
Vue.use(Vuex)
  • 创建store对象
const store = new Vuex.Store({
  //state中存放的就是全局共享数据
  state:{count:0}
})
  • 将store对象挂载到vue中
new Vue ({
  el:'#app',
  render: h=>h(app),
  router,
  //将创建的共享数据对象，挂载到vue实例中，所有组件就可以直接从store中获取全局的数据了
  store
})

1.3 VueX的核心概念

  • 1.3.1 State

State提供唯一的公共数据源，所有共享的数据都要统一放到Store的state中

组件访问的state中数据的第一种方式：

this.$store.state.全局数据名称

组件访问的state中数据的第二种方式：

//从vuex中导入mapState函数
import {mapState} from 'vuex'

注释：通过导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性：

//例如：
computed:{
   ...mapState(['count'])
}
  • 1.3.2 Mutation

Mutation用于变更Store的数据

触发 mutation的第一种方式：this.$store.commit()函数

实例代码：

 mutations: {
   add(state){
     //变更状态
     state.count++
   }
 },
<template>
 <div>
     <h3>当前最新的count值：{{this.$store.state.count}}</h3>
     <button @click="handle1">+1</button>
 </div>
</template>

<script>
export default {
   data(){
       return{};
   },
   methods:{
       //触发mutation
      handle1(){
           this.$store.commit('add')
      }
   }
}
</script>

mutation时传递参数：

 mutations: {
   addN(state,step){
     //变更状态
     state.count += step
   }
 },
handle2(){
 this.$store.commit('addN',2)
}

触发mutation的第二种方式：

mutations: {
   sub(state){
      state.count--
   },
   subN(state,step){
     state.count -= step
  },
 },
<template>
 <div>
     <h3>当前最新的count值：{{count}}</h3>
     <button @click="handlersub">-1</button>
     <button @click="handlesub2">-2</button>
 </div>
</template>
<script>
import { mapState ,mapMutations} from 'vuex';
export default {
   computed:{
       ...mapState(['count'])
   },
   methods:{
       ...mapMutations(['sub','subN']),
       handlersub(){
           this.sub()
       },
       handlesub2(){
           this.subN(2)
       }
   }
}
</script>

  • 1.3.3 Action

Action用于处理异步任务

在actions中不能直接修改state中的数据，必须通过context.commit触发某个mutations中的函数

触发actions的第一种方式：

this.$store.dispatch()

actions中携带参数：

 //context是默认参数
addNdely(context,step){
  setTimeout(()=>{
    context.commit('addN',step)
  },1000)
}

触发actions的第二种方式：

import {mapActions} from 'vuex';
export default {
    methods:{
        //触发actions
         ...mapActions(['addNdely']),    
    }
}
  • 1.3.4 Getter

Getter用于对store中的数据进行加工处理形成新的数据

使用getters的第一种方式：

this.$store.getters.函数名称

使用getters的第二种方式：

import {mapGetters} from 'vuex';
export default {
   computed:{
     ...mapGetters(['showNum'])
   },
}

store.js：

import { setTimeout } from 'core-js'
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0
  },
  getters: {
    //这是一个函数
    showNum:state =>{
       return '最新count:'+state.count
    }
  },
  mutations: {
    add(state){
      //变更状态
      state.count++
    },
    addN(state,step){
      //变更状态
      state.count += step
    },
    sub(state){
       state.count--
    },
    subN(state,step){
      state.count -= step
   },
  },
  actions: {
    //context是默认参数
    addNdely(context,step){
         setTimeout(()=>{
            context.commit('addN',step)
         },1000)
    }
  },
  modules: {
  }
})

Addi.vue：

<template>
  <div>
      <h3>当前最新的count值：{{this.$store.state.count}}</h3>
      <!-- <h4>getters:{{$store.getters.showNum}}</h4> -->
      <h4>getters:{{showNum}}</h4>
      <button @click="handle1">+1</button>
      <button @click="handle3">+2</button>
      <button @click="addNdely">+dely</button>
  </div>
</template>
<script>
import { mapMutations,mapActions,mapGetters} from 'vuex';
export default {
    computed:{
      ...mapGetters(['showNum'])
    },
    methods:{
        //触发mutation
         ...mapMutations(['add','addN']),
         ...mapActions(['addNdely']),
       handle1(){
            this.add()
       },
       handle2(){
            this.$store.commit('addN',2)
       },
       handle3(){
           this.$store.dispatch('addNdely',2)
       }
      
    }
}
</script>

Sub.vue：

<template>
  <div>
      <h3>当前最新的count值：{{count}}</h3>
      <button @click="handlersub">-1</button>
      <button @click="handlesub2">-2</button>
  </div>
</template>
<script>
import { mapState ,mapMutations} from 'vuex';
export default {
    computed:{
        ...mapState(['count'])
    },
    methods:{
        ...mapMutations(['sub','subN']),
        handlersub(){
            this.sub()
        },
        handlesub2(){
            this.subN(2)
        }
    }
}
</script>

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • vue3.2中的vuex使用详解

    vue3.2中的vuex使用详解

    这篇文章主要介绍了vue3.2中的vuex使用详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2023-04-04
  • vue.js—定义全局变量、函数的方式

    vue.js—定义全局变量、函数的方式

    这篇文章主要介绍了vue.js—定义全局变量、函数的方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Element Plus 表格表单校验功能实现原理

    Element Plus 表格表单校验功能实现原理

    本文档讲解基于Element Plus的可编辑表格表单校验功能的实现,重点说明样式配置对校验错误信息显示的关键作用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2025-09-09
  • vue 之 css module的使用方法

    vue 之 css module的使用方法

    这篇文章主要介绍了vue 之 css module的使用方法，css module目的为所有类名重新生成类名，有效避开了css权重和类名重复的问题，非常具有实用价值，需要的朋友可以参考下
    2018-12-12
  • vue3封装el-pagination分页组件的完整代码

    vue3封装el-pagination分页组件的完整代码

    这篇文章主要介绍了vue3封装el-pagination分页组件的完整代码,本文通过实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-02-02
  • Vue.js2.0中的变化小结

    Vue.js2.0中的变化小结

    最近小编在学习vue.js ,发现里面有好多好玩的东东，今天小编给大家分享Vue.js2.0中的变化，小编会在日后给大家持续更新的，感兴趣的朋友参考下吧
    2017-10-10
  • 利用Vue.js实现求职在线之职位查询功能

    利用Vue.js实现求职在线之职位查询功能

    Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。下面这篇文章主要给大家介绍了关于利用Vue.js实现求职在线之职位查询功能的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-07-07
  • vue-for循环嵌套操作示例

    vue-for循环嵌套操作示例

    这篇文章主要介绍了vue-for循环嵌套操作,结合实例形式分析了vue.js使用for循环嵌套读取数据相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • Vue使用Pinia轻松实现状态管理

    Vue使用Pinia轻松实现状态管理

    pinia，一个基于Vue3的状态管理库，它可以帮助开发人员管理Vue应用程序的状态，本文主要为大家介绍了Pinia的用法，感兴趣的小伙伴可以跟随小编一起学习一下
    2023-06-06
  • Vue自定义指令生命周期钩子的完全指南

    Vue自定义指令生命周期钩子的完全指南

    Vue 自定义指令提供了强大的生命周期钩子,让你可以精准控制指令在 DOM 元素上的行为,本文将深入解析所有钩子函数,并提供丰富的实用示例,感兴趣的小伙伴可以了解下
    2026-01-01

最新评论