vuex简单使用

介绍

vuex中的数据是存储在浏览器中的内存中的，所以在刷新页面后，vuex会被清理掉。

• Vuex 实现了一个单向数据流，在全局拥有一个State 存放数据，当组件要更
  改State 中的数据时，必须通过Mutation 提交修改信息， Mutation 同时
• 提供了订阅者模式供外部插件调用获取State 数据的更新。
  而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作
  需要走Action ，但Action 也是无法直接修改State 的，还是需要通过
  Mutation 来修改State的数据。最后，根据State 的变化，渲染到视图
  上。

action 与 mutation 的区别

• action 提交的mutation 不是直接修改状态
• action 可以包含异步操作，而mutation 不行
• action 中的回调函数第一个参数是context ，是一个与store 实例具有相同属性的
  方法的对象
• action 通过store.dispatch 触发， mutation 通过store.commit 提交

与localStorage和sessionStorage的区别

• localstorage（本地存储）则以文件的方式存储在本地,永久保存。
• sessionstorage( 会话存储 ) 是临时保存，直到关闭浏览器。
• localStorage和sessionStorage只能存储字符串类型，无法存储对象。

持久化

在vuex 里数据改变的时候把数据拷贝一份保存到localStorage 里面，刷新之后，如果localStorage 里有保存的数据，取出来再替换store 里的state。

使用

1、配置介绍

{
	state: {} // 存放动态数据
	mutations: {} // 这里里面是改数据的，用this.$store.commit() 方法
	getters: {} // 计算数据，类似于vue的 computed
	actions: {} // 如果我有异步操作，需要在这里执行后，commit mutaions中的函数改变数据；组件通过this.$store.dispatch() 调用 actions 里面的函数
}

2、使用

import Vue from "vue";
import Vuex from "vuex";
import Axios from "axios";

// 挂载插件
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 1000000,
    isLogin: false // 登录状态
  },
  mutations: {
    // 修改数据
    increase(state) {
      state.count += 1;
    },
    login(state) {
      state.isLogin = true;
    },
    logout(state) {
      state.isLogin = false;
    }
  },
  getters: {
    // 对state中的数据进行加工处理
    money: state => {
      return state.count + "元";
    }
  },
  actions: {
    // 异步操作时使用
    increaseAsync({ state, commit }, payload) {
      setTimeout(() => {
        commit("increase");
      }, 1000);
    },
    submitLogin({commit},payload){
      return new Promise(resolve => {
        setTimeout(() => {
          commit('login');
          resolve(true);
        }, 2000);
      })
    }
  }
});

3、帮组方法（获取多个）

1. …mapState([‘xxx’])
2. mapGetters()
3. mapMutations()
4. mapActions()

4、模块化