vuex基础、数据持久化

• vuex概念

        是vue提供给我们的一个状态管理工具，用来解决大中型项目的数据共享的问题

  

• vuex五大核心        

        state： 存储数据的地方

        actions： 异步操作

        mutations: 同步操作，只有mutations可以修改state中的数据

        getters： 相当于 state的计算属性。

        moduleas模块化 modeA, modeB，modeC

• vuex安装及使用

        1.安装

    npm install vuex --save

        2.创建仓库配置vuex，src 目录创建 store/index.js

//引入Vue
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//将vuex挂载到vue实列
Vue.use(Vuex)


export default new Vuex.Store({
//存储数据
  state: {

  },
//存储方法
  mutations: {

    
  },
//调用方法
  actions: {

  },
//模块化管理
  modules: {

  },
//类似computed对state的数据进行计算处理
  getters: {

}

})

• vuex数据持久化

             1、安装插件：

npm install vuex-persist -D

             2、使用配置：

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

Vue.use(Vuex)

//引入插件
import VuexPersistence from 'vuex-persist'

//设置数据存储的位置
const vuexLocal = new VuexPersistence({
  storage: window.localStorage //(或者sessionStorage)
})



export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  },
  modules: {

  },
//配置插件
  plugins: [vuexLocal.plugin]
})

下次页面刷新后数据就不会丢失，我们一般使用数据持久化存储token，做页面登录状态的判断