Vuex用法

news2024/12/31 5:34:52

在 Vue.js 项目中，src/store 目录通常用于存放 Vuex store 文件。Vuex 是 Vue 的状态管理库，帮助你更有效地管理应用的状态，特别是在构建大型单页应用程序（SPA）时。通过集中存储和管理应用的所有组件的状态，Vuex 提供了一种可预测的状态管理模式。

`src/store` 目录结构

一个典型的 src/store 目录结构可能如下所示：

src/
├── store/
│   ├── index.js          // 创建并导出 Vuex Store 实例
│   ├── actions.js        // 定义 action 函数
│   ├── mutations.js      // 定义 mutation 函数
│   ├── getters.js        // 定义 getter 函数
│   ├── state.js          // 定义初始状态
│   └── modules/          // 如果使用模块化 store，则放在此目录下
│       ├── moduleA.js    // 模块 A 的 store 配置
│       └── moduleB.js    // 模块 B 的 store 配置

核心概念

State：表示应用的状态树，即所有组件共享的数据。
Getters：类似于计算属性，用于从 state 中派生出一些状态，例如过滤后的数据列表。
Mutations：更改 state 的唯一方法，必须是同步函数。
Actions：用于处理异步操作，并可以包含多个 mutation，通常用于与 API 交互。
Modules：将 store 分割成多个小模块，每个模块有自己的 state、mutation、action 和 getter，适用于大型应用。

示例代码

`index.js`

这是创建并导出 Vuex Store 实例的地方。它会引入其他文件中的定义，并配置 store。

import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
import mutations from './mutations';
import actions from './actions';
import getters from './getters';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  // 如果有模块，可以在这里添加
  // modules: {
  //   moduleA: require('./modules/moduleA').default,
  //   moduleB: require('./modules/moduleB').default,
  // },
  strict: process.env.NODE_ENV !== 'production' // 开启严格模式（仅限开发环境）
});

`state.js`

定义应用的初始状态。

export default {
  count: 0,
  items: []
};

`mutations.js`

定义改变 state 的同步函数。

export default {
  increment(state) {
    state.count++;
  },
  setItems(state, items) {
    state.items = items;
  }
};

`actions.js`

定义处理异步逻辑或组合多个 mutation 的函数。

import axios from 'axios';

export default {
  async fetchItems({ commit }) {
    const response = await axios.get('/api/items');
    commit('setItems', response.data);
  }
};

`getters.js`

定义从 state 中派生出的状态。

export default {
  doneTodos(state) {
    return state.items.filter(item => item.done);
  }
};

使用 Vuex Store

一旦设置了 store，你可以在任何 Vue 组件中通过 this.$store 访问它。以下是一些常见的用法：

访问 State：this.$store.state.count
提交 Mutation：this.$store.commit('increment')
分发 Action：this.$store.dispatch('fetchItems')
获取 Getter：this.$store.getters.doneTodos

此外，你还可以使用 map 辅助函数来简化对 store 的访问：

import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';

export default {
  computed: {
    ...mapState(['count', 'items']),
    ...mapGetters(['doneTodos'])
  },
  methods: {
    ...mapMutations(['increment']),
    ...mapActions(['fetchItems'])
  }
};

模块化 Store

对于较大的应用，推荐将 store 拆分为多个模块，每个模块负责一部分功能。这可以通过在 modules 目录下创建独立的 store 文件来实现。然后，在 index.js 中注册这些模块。

// src/store/modules/moduleA.js
const state = { /* 模块 A 的状态 */ };
const mutations = { /* 模块 A 的 mutations */ };
const actions = { /* 模块 A 的 actions */ };
const getters = { /* 模块 A 的 getters */ };

export default {
  namespaced: true, // 开启命名空间，防止不同模块间名称冲突
  state,
  mutations,
  actions,
  getters
};

// 在 src/store/index.js 中注册模块
import moduleA from './modules/moduleA';
import moduleB from './modules/moduleB';

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

通过这种方式，你可以保持 store 的组织性，使得代码更易于维护和扩展。