Vuex +拆分模块 + 数据持久化(防止页面刷新数据丢失)

一、什么是vuex？

vue的集中式状态管理框架，组件共享data数据。
vuex的核心是store对象，有且只有这一个对象。
vuex和单纯的全局对象有以下两点不同:
1.vuex的状态存储是响应式的。
2.不能直接改变store中的状态，改变store中的状态的唯一途径就是显示的提交((commit)mutation。

二、vuex实现原理？

利用vue的mixin混入机制，在beforeCreate钩子前混入vuexInit方法，vuexInit方法实现了store注入vue组件实例，并注册了vuex store的引用属性$store。

三、vuex五个核心属性：

• state: Vuex store实例的根state对象
• getter：state的计算属性
• mutations:提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。
• actions:和mutation的功能大致相同，不同之处在于==>1.Action提交的是mutation，而不是直接变更状态。2.Action可以包含任意异步操作，promise/定时器。
• modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
  
  对于actions尤大的回答
  

四、Vuex的辅助函数有四个(mapState、mapGetter、mapMutation、mapAction)

• mapState
• mapGetter
• mapMutation
• mapAction
  注意：
  mapState，mapGetters返回的是属性，所以混入到 computed 中，
  mapMutations，mapActions返回的是方法，只能混入到methods中

五、vuex的用法

cnpm i vuex --save

• –save(-S) 下载到dependencies(开发环境)
• –save-dve(-D) 下载到devDependencies(生产环境)
  1.在src文件下新建store文件，引入vue,vuex，创建store实例。为了方便看，store四个属性没有分开导，这里也没有对store拆分模块。
  

2在mian.js引入store，并挂载

3获取state有两种方式

• this.$store.state.name
• …mapState映射
  
  

4改state中的数据，有四种方式，commit,dispatch，mapMutations，mapActions辅助函数

• 1.commit mutations(直接触发mutaions)
  
  

• 2.使用action，(store使用dispatch通过action触发mutations)
  
  

• 3.使用mapMutations，mapActions辅助函数
  
  

六、对vuex拆分模块

目录结构

在外层的模块引入子模块

子模块

七、数据持久化

vuex的数据是存储在内存中，页面刷新，会丢失数据
总结了以下几种方式
1.手动利用HTML5的本地存储
localStorage或sessionStorage
2.利用vuex-persistedstate插件，原理也是运用本地缓存

npm install vuex-persistedstate --save

import Vue from 'vue';
import Vuex from 'vuex';
import createPersistedState from "vuex-persistedstate"


Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    name: '',
    password: ''
  },
  getter: {},
  mutations: {
    setName(state,name) {
        state.name = name
    },
  },
  actions: {
      actionsSetName(context,value) {
        context.commit('setName',value)
    }
  },
  plugins: [createPersistedState({
    storage: window.localStorage
})]
})

export default store

3. js-cookie插件
   下载

npm install js-cookie --save

引入

import Cookies from 'js-cookie'

Cookies.set('name', 'value'，{ expires: 7, path: '' });                           //7天后过期
Cookies.get('name');          //获取
Cookies.remove('name')        //移除
//存对象
const user = {
  name: '小鹿Max',
  age: 18
}
Cookies.set('user', user)
const liaUser = JSON.parse(Cookies.get('user'))

写的很清晰：
https://blog.csdn.net/yupyuping/article/details/113740759