Vue.js 中简单版 Vuex 的两种使用方式，助你轻松管理状态

2023-10-26 19:27:25

Vuex：Vue.js 的状态管理神器

在现代 Web 开发中，状态管理是一个至关重要的概念。它可以帮助我们管理应用程序中的数据，使之能够在不同的组件和模块之间共享和更新。而 Vuex 是 Vue.js 开发者手中的利器，它提供了集中式状态管理的解决方案，简化了应用程序开发流程。

Vuex 概述

Vuex 是 Vue.js 框架专门设计的集中式状态管理库。它使用单一的状态树来存储应用程序的状态，并通过 mutations 和 actions 来修改状态。这确保了状态的一致性和可预测性，同时也简化了组件之间的通信。

使用方式

Vuex 可以应用于两种不同的状态管理模式：

1. 全局状态管理

在全局状态管理模式下，Vuex 存储着整个应用程序的状态。组件通过映射（mapping）的方式访问和修改这些状态。这种模式适合管理全局共享的状态，例如用户登录信息、语言设置等。

代码示例：

// store/index.js
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    incrementAsync({ commit }) {
      setTimeout(() => {
        commit('increment');
      }, 1000);
    }
  }
});

// 组件
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
    <button @click="incrementAsync">Increment Async</button>
  </div>
</template>

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

export default {
  computed: {
    ...mapState([
      'count'
    ])
  },
  methods: {
    ...mapActions([
      'increment',
      'incrementAsync'
    ])
  }
}
</script>

2. 本地状态管理

在本地状态管理模式下，Vuex 仅存储组件的局部状态。组件只能访问和修改自己的状态。这种模式适合管理组件内部的状态，例如表单数据、组件状态等。

代码示例：

// 组件
<script>
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

export default {
  store
}
</script>

// 组件模板
<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

// 组件脚本
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit('increment');
    }
  }
}
</script>