Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

以下是一些 Vuex API 的概述:

安装

首先,确保你的项目中已经安装了 Vuex。你可以通过 npm 或 yarn 来安装:

npm install vuex --save

或者

yarn add vuex

Vuex 核心概念

  • State: 应用程序的状态。
  • Getters: 从 state 中派生出一些状态。
  • Mutations: 改变状态的唯一方式,必须是同步的。
  • Actions: 提交 mutations 的封装,可以包含任意异步操作。
  • Modules: 将 store 分成模块。

Vuex API

new Vuex.Store(options)

创建一个新的 Vuex store 实例。

  • options: 一个对象,表示 store 的配置。
import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

store.state

访问当前应用的状态。

const count = store.state.count;

store.commit(type, [payload])

提交一个 mutation。

store.commit('increment');

store.dispatch(type, [payload])

分发一个 action。

store.dispatch('incrementAsync');

store.getters

访问当前应用的状态。

const count = store.getters.count;

store.subscribe(handler)

监听 store 的变化。

store.subscribe((mutation, state) => {
  // mutation, state
});

更多关于 Vuex API 的信息,请访问我们的官方文档:Vuex 官方文档

Vuex 与 Vue 的集成

Vuex 可以与 Vue 应用程序无缝集成。以下是如何在 Vue 应用程序中使用 Vuex:

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

Vue.use(Vuex);

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
});

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

Vuex 是一个强大的状态管理库,可以帮助你更好地管理 Vue 应用程序的状态。希望这份文档能帮助你更好地理解 Vuex API。


Vue Store