简单了解vue2中的vuex使用方法

1、什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的**状态管理模式 + 库**。它采用集中式存储管理应用的所有组件的状态，并  
以相应的规则保证状态以一种可预测的方式发生变化,通过Vuex我么可以解决组件之间数据共享的问题，后期也方便维护

一、大致流程  
    (1).从组件触发
    (2).从组件(call)调用了action，和后台去交互一些数据
    (3).actions，dispatch(异步派发) mutations
    (4).mutations去出发了状态state的改变
    (5).state去更新了components
    3、4、5这三步加起来就是vuex
二、注意事项  
    1.数据流是单向  
    2.组件能够调用actions
    3.actions可以派发mutations
    4.只有mutations可以改变state
    5.state是响应式的，只要state被更新，name组件将同步更新

export default new Vuex.Store({
  state: {
      //这里存放状态，就是数据，例：
       userInfo: {},
  },
  getters: {
    //state的计算属性
    //从state中获得的数据
  },
  mutations: {
    //一些更新state的逻辑
    setUser(state, val) {
      state.userInfo = val;
    },
  },
  actions: {
    //触发mutations,例：
     setUserrAct({ commit }, val) {
      return new Promise((resolve, reject) => {
       //在这里写一些方法
      });
    },
  },
  modules: {
      //用来模块化store仓库
  }
})

2、Vuex5大核心

vuex有五大核心，参照上述代码，分别是:
(1)state属性：用来存放状态，如上述存放数据userInfo
(2)getters:可以通过this.store.getters来存取放在state里面的数据

getters: {
  userNameChange(state) {
    return state.userInfo.name + '小朋友'
  },
  // 调用的时候传参
  userNickname: (state) => (type) => {
    return `${state.userInfo.nickname}-${type}`
  }
},

(3)mutations:用来操作state内的数据 如上例：

 mutations: {
    //一些更新state的逻辑
    setUser(state, val) {
      state.userInfo = val;
    },
  },

(4)actions：这是异步的mutations，可以通过dispatch来分发改变state
(5)modules:用来模块化store(仓库) 例:

3、怎么使用vuex

首先使用vue脚手架搭建项目，在项目里下载依赖,npm install vuex --save
搭建完项目后在src/store文件夹下面找到index.js文件，详情请参考上图,新版的Vuex搭建完之后不需要再额外引入了,这里有官网，不知道的小伙伴可以点击查看
在HomeView.vue中使用

4、数据持久化

数据持久化须要下载插件：npm install vuex-persistedstate --save  
持久化存储的好处：不主动删除不会丢失  

安装完之后就可以开始使用了，还是同样的index.js文件内：

storage储存方式：(sessionStorage，localStorage)，key:定义本地存储数据的名称

5、Vuex的辅助函数，在页面上使用的

import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
//在HomeView.vue中使用