Vuex 基础教程

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

安装 Vuex

首先，你需要安装 Vuex。可以通过 npm 或 yarn 来安装：

npm install vuex --save
# 或者
yarn add vuex

基本概念

State

Vuex 使用单一状态树。几乎所有的 Vue 组件都可以通过 this.$store.state 访问这个状态树。

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

Getter

Getter 可以认为是 store 的计算属性。就像计算属性一样，getter 也有缓存功能。

const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: 'Learn Vue' },
      { id: 2, text: 'Learn Vuex' }
    ]
  },
  getters: {
    doneTodos: state => {
      return state.todos.filter(todo => todo.done);
    }
  }
});

Mutation

Mutation 必须是同步的。

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

Action

Action 提交的是 mutation，而不是直接变更状态。

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

深入阅读

更多 Vuex 的使用方法和高级特性，请参考我们的 Vuex 官方文档。