vue中的vuex详解

文章目录

vue中的vuex详解
- 一、引言
- [二、Vuex 的核心概念](#二、Vuex 的核心概念)
- - 1、State
  - - [1.1、定义 State](#1.1、定义 State)
    - [1.2、访问 State](#1.2、访问 State)
  - 2、Mutation
  - - [2.1、定义 Mutation](#2.1、定义 Mutation)
    - [2.2、提交 Mutation](#2.2、提交 Mutation)
  - 3、Action
  - - [3.1、定义 Action](#3.1、定义 Action)
    - [3.2、分发 Action](#3.2、分发 Action)
  - 4、Getter
  - - [4.1、定义 Getter](#4.1、定义 Getter)
    - [4.2、使用 Getter](#4.2、使用 Getter)
  - 5、Module
  - - [5.1、定义 Module](#5.1、定义 Module)
- [三、安装和配置 Vuex](#三、安装和配置 Vuex)
- - [1、安装 Vuex](#1、安装 Vuex)
  - [2、配置 Vuex](#2、配置 Vuex)
- 四、总结

vue中的vuex详解

一、引言

Vuex 是 Vue.js 的官方状态管理模式和库，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在开发大型单页应用时，组件间的状态共享和数据传递变得复杂，Vuex 提供了一种集中管理状态的解决方案。

二、Vuex 的核心概念

1、State

State 是 Vuex 存储所有状态的仓库，可以认为是应用的数据中心。任何组件都可以访问和修改 State 中的数据。

1.1、定义 State

javascript 复制代码

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  }
});

1.2、访问 State

在组件中可以通过 this.$store.state 访问 State 中的数据。

2、Mutation

Mutation 是同步函数，用于更改 Vuex 的 store 中的状态。每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

2.1、定义 Mutation

javascript 复制代码

const mutations = {
  increment(state) {
    state.count++;
  }
};

2.2、提交 Mutation

在组件中通过 this.$store.commit('mutation类型') 提交 mutation。

3、Action

Action 类似于 Mutation，但 Action 提供了执行异步操作的方法。

3.1、定义 Action

javascript 复制代码

const actions = {
  incrementAsync({ commit }) {
    setTimeout(() => {
      commit('increment');
    }, 1000);
  }
};

3.2、分发 Action

在组件中通过 this.$store.dispatch('action类型') 分发 action。

4、Getter

Getter 允许组件从 Vuex store 中获取数据，类似于组件中的 computed 属性。

4.1、定义 Getter

javascript 复制代码

const getters = {
  doubleCount(state) {
    return state.count * 2;
  }
};

4.2、使用 Getter

在组件中可以通过 this.$store.getters 访问 getter。

5、Module

Module 允许将 store 分割成模块，每个模块拥有自己的 state、mutation、action、getter。

5.1、定义 Module

javascript 复制代码

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
};

export default new Vuex.Store({
  modules: {
    moduleA
  }
});

三、安装和配置 Vuex

1、安装 Vuex

对于 Vue 3，使用以下命令安装 Vuex：

bash 复制代码

npm install vuex@4 --save

2、配置 Vuex

在项目中创建一个 store 文件夹，并在其中创建 index.js 文件进行 Vuex 的配置。

javascript 复制代码

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    // 定义状态
  },
  mutations: {
    // 定义同步修改状态的方法
  },
  actions: {
    // 定义异步修改状态的方法
  },
  getters: {
    // 定义获取状态的方法
  },
  modules: {
    // 定义模块
  }
});

在 main.js 中引入并使用 store：

javascript 复制代码

import Vue from 'vue';
import App from './App.vue';
import store from './store';

new Vue({
  el: '#app',
  render: h => h(App),
  store
});

四、总结

Vuex 是 Vue.js 应用程序的状态管理模式和库，它通过集中式存储管理应用的所有组件的状态，使得状态的变更变得可预测。通过 State、Mutation、Action、Getter 和 Module 等核心概念，Vuex 为开发大型单页应用提供了强大的状态管理能力。

参考文章：