轻松上手使用Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式和库。它主要用于管理应用程序中的全局状态，提供一个集中式存储库，并且以可预测的方式来更新这些状态。以下是 Vuex 的基本用法和一些关键概念：

1.安装 Vuex

首先，需要在 Vue.js 项目中安装 Vuex：

npm install vuex

2.创建一个 Store(仓库)

每个 Vuex 应用的核心就是 store（仓库）。store 基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

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: {increment (context) {context.commit('increment');}},getters: {count: state => state.count}
});export default store;

3.将 Store 注入到 Vue 实例中

创建 Vue 实例时，将 store 作为选项传入：

import Vue from 'vue';
import store from './store';new Vue({store,render: h => h(App)
}).$mount('#app');

4.核心概念

State（状态）‌

State 是存储应用数据的地方，可以通过 this.$store.state 访问：

console.log(this.$store.state.count);

或者使用 mapState 辅助函数在组件中更方便地访问：

import { mapState } from 'vuex';export default {computed: mapState(['count'])
};

Mutations（变更）‌

Mutations 是唯一允许更新应用状态的方法，但是必须是同步函数。第一个参数是 state，可以传入额外的参数，即 commit 的 payload：

this.$store.commit('increment');

‌Actions‌

Actions 类似于 Mutations，不同点在于：

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

this.$store.dispatch('increment');

‌Getters‌

Getters 可以认为是 store 的计算属性，可以对 state 进行计算并返回结果：

computed: { count() { return this.$store.getters.count; } }

或者使用 mapGetters 辅助函数：

import { mapGetters } from 'vuex'; export default { computed: mapGetters(['count']) };

5.模块（Modules）

当应用变得复杂时，可以将 Vuex 的 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter，甚至是嵌套子模块：

const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } }; const moduleB = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } }; const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB } });