VUE3入门教程：使用Vuex状态管理实现全局数据管理-Vue.js-PHP中文网

VUE3入门教程：使用Vuex状态管理实现全局数据管理

WBOY

发布： 2023-06-15 21:54:40

原创

2226人浏览过

随着vue.js的不断发展，vue 3也正式推出并逐渐得到了广泛的应用，vue 3相较于vue 2有很多的优化，比如通过proxy对象代理数据来实现数据拦截与劫持等。然而，在实际应用中，由于大型应用项目往往会拥有许多的组件，因此全局状态的管理变得越来越重要。这时候，vuex就是一种非常好的解决方案。

1. Vuex简介

Vuex是Vue.js的官方状态管理库，旨在解决Vue应用程序中多个组件之间共享状态（数据）的问题。其核心概念包括：

State（状态）：即应用程序中需要全局管理的数据。
Getter（取值器）：用于从state中派生出一些状态（类似组件中的computed属性）。
Mutation（突变）：用于修改state中的数据，由于Vuex的数据在mutation中是同步更新的，因此可以保证数据的一致性。
Action（动作）：和mutation类似，也是用于修改state中的数据，但是它可以异步操作，可以通过它来发起网络请求等异步操作。

通过对这些核心概念的灵活使用，Vuex可以帮助我们实现全局数据的管理，从而简化组件之间的传递与操作。

2. 创建Vuex Store

Vuex中的数据存储在store对象中，因此，我们首先需要创建一个store对象。在Vue 3中，创建store对象的方式和Vue 2稍有不同。

import { createStore } from 'vuex'; // 导入createStore方法

const store = createStore({
  state() {
    // 定义state对象
    return {
      count: 0
    }
  },
  mutations: {
    // 定义mutation方法
    increment(state) {
      state.count++;
    }
  },
  actions: {
    // 定义action方法
    incrementAsync(context) {
      setTimeout(() => {
        context.commit('increment');
      }, 1000);
    }
  },
  getters: {
    // 定义getter方法
    doubleCount(state) {
      return state.count * 2;
    }
  }
})

export default store; // 导出store对象

登录后复制

在上面的代码中，我们通过createStore方法创建了一个store对象，并传入了一个对象，对象中包含了state、mutations、actions和getters四个属性。其中，state属性定义了全局状态count的初始值为0；mutations属性定义了一个mutation方法increment，实现了将count值加1的功能；actions属性定义了一个action方法incrementAsync，实现了异步将count值加1的功能；getters属性定义了一个getter方法doubleCount，返回count值的两倍。

立即学习“前端免费学习笔记（深入）”；

3. 在组件中使用Vuex

在创建完store对象后，我们可以在组件中直接使用其中的数据和方法。在Vue 3中，可以使用

<script setup>
import { useStore } from 'vuex';

const store = useStore();

function handleClick() {
  store.commit('increment');
}

</script>

<template>
  <div>
    <p>count: {{store.state.count}}</p>
    <p>double count: {{store.getters.doubleCount}}</p>
    <button @click="handleClick">increment</button>
  </div>
</template>

登录后复制

在上面的代码中，我们通过useStore函数获取到了store对象，并在handleClick方法中调用了increment方法来修改count值。在template中，我们可以通过store.state.count获取到count值，通过store.getters.doubleCount获取到count值的两倍。