vue从入门到精通之【vuex】(七)

vuex一个公用的大仓库，Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。

Vuex 实现了一个单向数据流，在全局拥有一个 state 存放数据，当组件要更改 state 中的数据时，必须通过 mutations 进行，mutations 同时提供了订阅者模式供外部插件调用获取 state 数据的更新。而当所有异步操作（常用于调用后端接口异步获取数据）或批量的同步操作需要走 actions，但 actions 也是无法直接修改 state 的，还是需要通过触发 mutations 中的方法，然后 mutations 来修改 state 的数据。数据变更后相应推送给组件，组件重新渲染到视图上。

vuex 是 vue 的状态管理器，存储的数据是响应式的。但是并不会保存起来，刷新之后就回到了初始状态，具体做法是在 vuex 里数据改变的时候把数据拷贝一份保存到 localStorage 里面，刷新之后如果 localStorage 里有保存的数据，取出来再替换 store 里的 state。

核心：State，Getter，Mutation，Action，Module

1. state：包含了store中存储的各个状态。

2. getter: 类似于 Vue 中的计算属性，根据其他 getter 或 state 计算返回值。

3. mutation: 一组方法，是改变store中状态的执行者，只能是同步操作。

4. action: 一组方法，其中可以包含异步操作。

5. module:模块化管理

一、安装

npm install vuex --save
yarn add vuex

二、创建仓库store

在src下创建一个store文件夹，在文件夹里面创建一个index.js

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

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    count: 0,
    name:"zhangsan"
  },
  getter: {
    doneTodos: (state, getters) => {
      return state.todos.filter(todo => todo.done)
    }
  },
  mutations: {
    increment (state, payload) {
      state.count++
    }
  },
  actions: {
    addCount(context) {
      // 可以包含异步操作
      // context 是一个与 store 实例具有相同方法和属性的 context 对象
    }
  }
})

export default store;

修改main.js：