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