Vue的状态管理vuex使用方法详解

Vue.js 是一套前端实现 MVVM 模式的框架，而 Vuex 是基于 Vue 构建的专门为大型应用程序开发的状态管理模式和库。Vuex 状态管理的核心是使用一个全局 store 单位化管理所有的组件之间共享的状态。本篇文章将详细讲解 Vuex 的使用方法。

安装 Vuex

安装 Vuex 可以通过 npm 、yarn 、cdn 或直接在 js 文件中引入等方式。

通过 npm 安装：

npm install vuex --save

通过 yarn 安装：

yarn add vuex

通过 CDN 直接引入：

<script src="https://unpkg.com/vuex@x.x.x/dist/vuex.js"></script>

使用 Vuex

使用 Vuex 的第一步，是创建一个全局唯一的 Store 对象。Store 对象中包含了应用中所有的状态 state 、派发的 mutations 、行为的 action 、和获取状态的 getters 。其具体实现步骤如下：

1. 创建一个全局唯一的 Store 对象

// store.js
import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

1. 在创建 Vue 根实例时，将 Store 对象作为选项属性传递给 Vue 根实例。

// main.js
import Vue from "vue";
import App from "./App.vue";
import store from "./store";

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

1. 访问状态 state 和操作状态 mutations

// App.vue
<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  }
}
</script>

以上是简单的 Vuex 应用示例，下面将分别详细讲解状态、Mutation、Action、Getter。

状态 (State)

Vuex 中的状态存储仓库（store）和 Vue 实例有所不同。store就像一个存储库，它包含了整个应用的状态。这个状态是响应式的，即当其发生变化时，Vue.js 帮您更新视图。我们可以将状态想象成一个仓库，它包含了整个应用的数据。声明并且初始化状态如下：

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

如上面代码所示，在 state 中定义了一个 count 状态。

Mutations

Mutation 是 Vuex 中的原子操作，其接收 state 作为第一个参数，并且可以接收额外的参数。其核心作用是用来更新 Vuex 中 store 的 state 当前状态。其主要步骤如下：

1. Mutations 类型常量

export const ADD_TODO = "ADD_TODO";

1. 定义 mutations 函数

mutations: {
    [ADD_TODO](state, { todo }) {
      state.todos.push(todo);
    }
}

1. 提交 mutations 来更新状态

this.$store.commit(ADD_TODO, { todo: { text: "New Todo" } });

如此，状态已更新。

Action

Action 是 Vuex 中用于提交 mutation 的异步事件，其中可以包含任意异步操作。其核心作用是处理异步操作，并且通过提交 mutations 事件来更新状态。实现步骤如下：

1. 异步事件

import axios from "axios";

export const FETCH_TODOS_BEGIN = "FETCH_TODOS_BEGIN";
export const FETCH_TODOS_SUCCESS = "FETCH_TODOS_SUCCESS";
export const FETCH_TODOS_FAILURE = "FETCH_TODOS_FAILURE";

export function fetchTodos() {
  return dispatch => {
    dispatch(fetchTodosBegin());
    return axios
      .get("https://jsonplaceholder.typicode.com/todos")
      .then(response => {
        dispatch(fetchTodosSuccess(response.data));
        return response.data;
      })
      .catch(error => dispatch(fetchTodosFailure(error)));
  };
}

export const fetchTodosBegin = () => ({
  type: FETCH_TODOS_BEGIN
});

export const fetchTodosSuccess = todos => ({
  type: FETCH_TODOS_SUCCESS,
  payload: { todos }
});

export const fetchTodosFailure = error => ({
  type: FETCH_TODOS_FAILURE,
  payload: { error }
});

1. 提交 action 来调用异步事件

this.$store
  .dispatch(fetchTodos)
  .then(() => {
    console.log(this.$store.todos);
  })
  .catch(error => {
    console.error(error);
  });

如此，异步事件和状态已更新。

Getter

Getter 是 Vuex 中用于处理 state 的计算属性。Getter 将一个 state 对象作为第一参数，接收 Getter 方法作为第二个参数，并返回状态的计算结果。其主要步骤如下：

1. Getter 计算函数

export const getVisibleTodos = (state, filter) => {
  const todos = state.todos.filter(todo => todo.completed !== filter);
  return todos;
};

1. 使用 Getter 函数

computed: {
  visibleTodos() {
    return this.$store.getters.getVisibleTodos(this.filter);
  }
}

如此，state 对象的计算结果已获取到。

本篇文章主要介绍了 Vuex 的状态管理方法，包括如何定义状态（State）、原子操作（Mutation）、异步操作（Action）和计算属性（Getter），抛砖引玉，希望能为 Vue 使用者带来帮助。