Vuex 的核心概念:State, Mutations, Actions, Getters

Vuex 的核心概念:State, Mutations, Actions, Getters

Vuex 是 Vue.js 的官方状态管理库,提供了集中式的状态管理机制。它的核心概念包括 State(状态)、Mutations(变更)、Actions(动作)和 Getters(获取器)。以下是对这些概念的详细介绍及相应的代码示例。

State(状态)

State 是存储应用共享状态的地方。在 Vuex 中,State 是一个对象,包含应用中需要共享的所有数据。组件可以从 store 中读取状态,当状态发生变化时,依赖这些状态的组件会自动更新。

示例:

javascript 复制代码
// store.js
import { createStore } from 'vuex';

const store = createStore({
  state() {
    return {
      count: 0,
      todos: [
        { id: 1, text: 'Learn Vuex', done: true },
        { id: 2, text: 'Build a project', done: false },
      ],
    };
  },
});

export default store;

在组件中访问 state:

javascript 复制代码
// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{ todo.text }} - {{ todo.done ? 'Done' : 'Pending' }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count', 'todos']),
  },
};
</script>

Mutations(变更)

Mutations 是更改 Vuex 中 state 的唯一方法。每个 mutation 都有一个字符串的事件类型(type)和一个回调函数(handler)。回调函数接收 state 作为第一个参数,可以直接修改 state。需要注意的是,mutations 必须是同步函数。

示例:

javascript 复制代码
// store.js
const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    decrement(state) {
      state.count--;
    },
  },
});

在组件中提交 mutation:

javascript 复制代码
// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    },
    decrement() {
      this.$store.commit('decrement');
    },
  },
};
</script>

Actions(动作)

Actions 类似于 mutations,不同之处在于:

  • Action 提交的是 mutation,而不是直接变更状态。
  • Action 可以包含任意异步操作。

示例:

javascript 复制代码
// store.js
const store = createStore({
  state() {
    return {
      count: 0,
    };
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    },
  },
});

在组件中分发 action:

javascript 复制代码
// MyComponent.vue
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

<script>
import { mapState } from 'vuex';

export default {
  computed: {
    ...mapState(['count']),
  },
  methods: {
    incrementAsync() {
      this.$store.dispatch('incrementAsync');
    },
  },
};
</script>

在上述示例中,incrementAsync action 等待 1 秒后提交 increment mutation,从而异步地增加计数器的值。

Getters(获取器)

Getters 类似于组件的计算属性,用于从 state 中派生出一些状态。它们可以对 state 进行处理并返回结果,且结果会被缓存,只有当相关的 state 发生变化时才会重新计算。

示例:

javascript 复制代码
// store.js
const store = createStore({
  state() {
    return {
      todos: [
        { id: 1, text: 'Learn Vuex', done: true },
        { id: 2, text: 'Build a project', done: false },
      ],
    };
  },
  getters: {
    doneTodos: (state) => {
      return state.todos.filter((todo) => todo.done);
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length;
    },
  },
});

在组件中访问 getters:

javascript 复制代码
// MyComponent.vue
<template>
  <div>
    <p>Done Todos Count: {{ doneTodosCount }}</p>
    <ul>
      <li v-for="todo in doneTodos" :key="todo.id">
        {{ todo.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['doneTodos', 'doneTodosCount']),
  },
};
</script>

在上述示例中,doneTodos getter 返回已完成的待办事项列表,doneTodosCount getter 返回已完成的待办事项数量。

通过合理地使用 Vuex 的这些核心概念,可以使 Vue.js 应用的状态管理更加清晰、可维护和可预测。

相关推荐
海天胜景16 分钟前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼17 分钟前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
百锦再21 分钟前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref
jingling55525 分钟前
面试版-前端开发核心知识
开发语言·前端·javascript·vue.js·面试·前端框架
木头没有瓜2 小时前
vscode离线安装插件
ide·vue.js·vscode
浪裡遊3 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
markyankee1014 小时前
使用 Vue 脚手架创建项目的完整指南
vue.js
青松学前端4 小时前
vue-2.7源码解读之初始化流程和响应式实现
前端·vue.js·前端框架
流星稍逝4 小时前
Vue3 + Uniapp 图片压缩公共方法封装
前端·vue.js
eric*16885 小时前
尚硅谷张天禹老师课程配套笔记
前端·vue.js·笔记·vue·尚硅谷·张天禹·尚硅谷张天禹