Vue中使用vuex进行全局数据共享处理

知其_所以然

已于 2024-07-07 10:46:49 修改

阅读量339

点赞数 7

分类专栏： Vue2 Vue3 java技术文章标签： vue.js 前端 javascript

于 2024-06-04 10:00:00 首次发布

本文链接：https://blog.csdn.net/zwl2220943286/article/details/139397099

版权

java技术同时被 3 个专栏收录

66 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

10 篇文章 0 订阅

订阅专栏

1、简介

在之前的博文中，介绍了如何进行组件之间的数据传递，但是对于所有组件共享的变量来说，使用组件之间的数据传递实现复杂，因此本文引入vuex进行全局数据共享。

2、vuex的下载配置

2.1、vuex的下载

# 对于vue2来说，需要下载vuex3版本
npm i vuex@3
# 对于Vue3来说，需要下载vue4版本
npm i vuex@4

2.2、vuex原理和配置使用

2.2.1、vuex原理

2.2.2、vuex的配置

首先进行vuex配置文件的编写，本例中新建 index.js，具体内容如下：

1、在index.js文件中:

//引入vuex
import Vuex from 'vuex'
import Vue from 'vue'
// Vue中使用vuex
Vue.use(Vuex)
// 定义actions
const actions = {}
// 定义mutations
const mutations = {}
// 定义state
const state = {}
// 定义getters
const getters = {    }
}
// 新建store，并将上述定义的四个引入，并暴露出去
export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})

2、在main.js中：

import Vue from 'vue'
import App from './App.vue'
// 引入store
import store from './store/index'
Vue.config.productionTip = false
new Vue({
  render: h => h(App),
  store // 在Vue中引入store
}).$mount('#app')

注：在Vue中引入store之后，在任意组件中就会包含 $store 参数，可以直接使用 $store 进行全局变量操作。

3、vuex的使用

3.1、定义全局数据

在 index.js 文件中，定义全局变量，如下：

const actions = {
// 组件中使用 dispatch 定义的 add, 要与下面定义的方法名称一致
    add(context, data){  // context 指的是上下文，data是 dispatch 传递过来的参数
        context.commit('ADD', data)  // commit中定义的ADD要与mutations中定义的方法名一致
    }
}

const mutations = {
// actions中使用commit定义mutations中的方法名称
    ADD(state, data){  // state是管理全局变量的，在mutation中进行参数处理
        state.sum = state.sum + data
    }
}
// 在state中添加全局变量 sum
const state = {
    sum: 0 
}

在组件中如何使用全局变量，在组件中定义如下：

<template>
  <div>
<!-- 使用全局变量 -->
    <h1>当前求和为：{{ $store.state.sum }}</h1> 
    <button @click="plus">加</button>
  </div>
</template>

<script>
export default {
  name:'Count',
  data(){
    return {
      num: 0
    }
  },
  methods:{
    plus(){
// 使用vuex进行全局变量，add是vuex中actions的方法名称，this.num是传递的参数
      this.$store.dispatch('add', this.num)
    }
  }
}
</script>
<style>
</style>

具体流程如图所示：

以上流程是基础流程，也可以跳过actions步骤直接在组件中进行commit。

<template>
  <div>
<!-- 使用全局变量 -->
    <h1>当前求和为：{{ $store.state.sum }}</h1> 
    <button @click="plus">加</button>
  </div>
</template>

<script>
export default {
  name:'Count',
  data(){
    return {
      num: 0
    }
  },
  methods:{
    plus(){
// 使用vuex进行全局变量，可以直接进行commit,ADD是vuex中actions的方法名称，this.num是传递的参数
      this.$store.commit('ADD', this.num)
    }
  }
}
</script>
<style>
</style>

3.2、简化vuex的使用

3.2.1、简化state参数使用

使用计算属性实现引用全局共享变量，进行如下定义后，可以不用再使用 {{ $store.state.sum }} 获取对应的参数值，直接使用 {{sum}} 即可。

computed:{
  //   借助mapState生成计算属性(对象写法）指定计算属性名和state中参数名对应关系
  ...mapState({sum:'sum'})
  //   借助mapState生成计算属性(数组写法）指定计算属性名和state中参数名要一致
  ...mapState(['sum']),
}

3.2.2、简化getters中参数的使用

在vuex中定义getters，其中使用的方法名称可以作为全局变量名引用，例如在index.js文件中定义getters：

// 定义getters
const getters = {
  test(state){  
      return state.sum * 100
  }
}

在组件中通过 {{ $store.getters.test }} 进行获取，在简化之后，通过计算属性 {{ test }} 获取：

computed:{
    //   第一种：借助mapgetters生成计算属性(对象写法）指定计算属性名和state中方法名对应关系
    ...mapGetters({test:'test'})
    //   第二种：借助mapGetters生成计算属性(数组写法）指定计算属性名和getters中方法名要一致
    ...mapGetters(['test'])
}

3.2.3、简化actions使用

在组件中进行actions的使用需要定义 this.$store.dispatch('test', ths.data)，简化之后如下，在定义方法处要进行传参，例如： @click='plus(n)'：

methods:{
// 原始写法
  // plus(){
  //   this.$store.dispatch('add', this.num)
  // },
// 简化写法
  //   借助mapActions生成对应方法（对象写法）,在方法调用处需要传参 plus(n)
  ...mapActions({plus:'add'}),
  //   借助mapActions生成对应方法（数组写法），方法名相同,在方法调用处需要传参 plus(n)
  ...mapActions(['plus']),
}

3.2.4、简化mutations使用

在组件中进行mutations的使用直接commit时需要定义 this.$store.commit('test', ths.data)，简化之后如下，在定义方法处要进行传参，例如： @click='plus(n)'：

methods:{
// 原始实现
  // plus(){
  //   this.$store.commit('ADD', this.num)
  // },
// 简化实现
  //   借助mapMutations生成对应方法，会调用commit联系mutations（对象写法）
  ...mapMutations({plus:'ADD'}),
  //   借助mapMutations生成对应方法，会调用commit联系mutations（数组写法），方法名相同
  ...mapMutations(['plus'])
}