Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它通过 store 实例来管理应用中的状态，Vuex 的 API 文档说明详解包含了一系列的 API 方法及其用法。下面，我们会详细讲解Vuex的API文档说明详解的完整攻略，并提供两个示例来说明其用法。

1. Vuex 的基础概念

这部分内容主要包含了对 Vuex 的基础概念及其用法的介绍。例如：state、mutation、action、getter 等等。在这个部分里，值得重点关注的有：

1.1 state

Vuex 使用单一状态树，即每个应用仅仅包含一个 store 实例，但单一的状态树非常大，所以我们需要把它分成几个模块，每个模块拥有自己的 state。

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

1.2 mutation

更改 Vuex 的 store 中的状态的唯一合法方法就是提交 mutation。Vuex 中的 mutation 非常类似于事件，每个 mutation 都有一个字符串的事件类型 (type) 和一个回调函数 (handler)。

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

1.3 action

Action 类似于 mutation，不同在于：

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

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

1.4 getter

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤并计数：

export default new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false },
      { id: 3, text: '...', done: true },
      { id: 4, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    },
    doneTodosCount: (state, getters) => {
      return getters.doneTodos.length;
    }
  }
});

2. Vuex API

这部分内容主要包含了对 Vuex API 的详细介绍以及其用法的说明。

2.1 Vuex.Store

Vuex.Store 是一个构造函数，用来创建一个新的 store 实例。

import Vuex from 'vuex';

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

2.2 store.state

用来获取 store 的根状态对象。可以直接通过 store.state 访问到 state 对象。

store.state.count; // 0

2.3 store.commit

用来提交 mutation。接受两个参数，第一个参数是 mutation 的名称，第二个参数是传递给 mutation 的参数。

store.commit('increment');

2.4 store.dispatch

用来分发 action。接受一个包含 type 字符串的对象参数，或者是一个 type 字符串和 payload 对象参数。

store.dispatch({
  type: 'incrementAsync'
});

// 或者

store.dispatch('incrementAsync');

2.5 store.getters

包含了所有 getter 对象的方法。可以通过 store.getters 对象或者是通过 computed 属性访问 getter。

store.getters.doneTodosCount; // 2

示例一：购物车列表

假设我们有一个购物车列表的场景。当用户在购物车中添加、删除商品时，我们需要相应的更新购物车列表的视图。我们可以使用 Vuex 来实现。

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    cart: [
      { id: 1, name: '商品A', price: 10, quantity: 0 },
      { id: 2, name: '商品B', price: 15, quantity: 0 },
      // ...
    ]
  },
  mutations: {
    // 添加商品到购物车
    addToCart(state, payload) {
      const product = state.cart.find(item => item.id === payload.id);
      if (product) {
        product.quantity++;
      } else {
        state.cart.push({ ...payload, quantity: 1 });
      }
    },
    // 从购物车中删除商品
    removeFromCart(state, payload) {
      const index = state.cart.findIndex(item => item.id === payload.id);
      if (index !== -1) {
        const product = state.cart[index];
        if (product.quantity > 1) {
          product.quantity--;
        } else {
          state.cart.splice(index, 1);
        }
      }
    }
  },
  actions: {
    addToCart(context, payload) {
      context.commit('addToCart', payload);
      Vue.notify({
        type: 'success',
        message: '添加商品成功'
      });
    },
    removeFromCart(context, payload) {
      context.commit('removeFromCart', payload);
      Vue.notify({
        type: 'success',
        message: '删除商品成功'
      });
    }
  },
  getters: {
    cartProducts: state => {
      return state.cart.map(item => {
        return {
          ...item,
          totalPrice: item.price * item.quantity
        }
      });
    },
    cartTotalPrice: (state, getters) => {
      return getters.cartProducts.reduce((total, product) => {
        return total + product.totalPrice;
      }, 0);
    }
  }
});

在上面的例子中，我们定义了 state、mutation、action、getter 等对象来维护购物车列表的基本功能。

示例二：聊天室

假设我们正在开发一个在线聊天室应用。当新的用户加入聊天室后，我们需要在聊天室中广播欢迎消息。为了维护聊天室状态，我们可以使用 Vuex。

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    messages: [],
    users: [],
    currentUser: null
  },
  mutations: {
    addMessage(state, payload) {
      state.messages.push(payload);
    },
    addUser(state, payload) {
      state.users.push(payload);
    },
    setCurrentUser(state, payload) {
      state.currentUser = payload;
    }
  },
  actions: {
    addMessage(context, payload) {
      context.commit('addMessage', payload);
    },
    addUser(context, payload) {
      context.commit('addUser', payload);
    }
  },
  getters: {
    filteredMessage: (state, getters) => {
      if (!state.currentUser) {
        return state.messages;
      }
      return state.messages.filter(message => {
        return message.user === state.currentUser.name;
      });
    }
  }
});

在这个例子中，我们定义了 state、mutation、action、getter 等对象来维护聊天室的基本功能。我们可以通过 Vuex 来追踪聊天室中的所有用户、消息。并在新用户加入时，广播欢迎消息。同时，我们可以使用 filteredMessage 的 getter 来过滤出当前用户发出的消息。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Vuex的API文档说明详解 - Python技术站

Vuex的API文档说明详解