Vuex

1.什么是vuex

Vuex是一个专门为vue.js应用程序开发的状态管理模式,它采用集中式存储各个组建的状态.它由五部分组成,分别是: state , getters , mutations , actions , modules .

2.Vuex五大核心

• state: 用来存放数据 (所有的数据都存放在state中)
• mutations: 它里边定义的方法可以直接修改state中的数据
• actions: 可以做一些异步操作
• getters: 类似于vue中的计算属性,对state中的数据做一些逻辑操作(会被缓存)
• modules: 将仓库分模块管理

3.运行机制

在组件中通过dispatch调用actions中的方法,在actions中通过commit调用mutations中的方法,在mutations中可以直接修改state中的数据.state中的数据一发生改变立马响应到组件中.

4.数据持久化

vuex中存放的数据页面一经刷新数据就会丢失.
解决办法:结合localStorage或sessionStorage,进入页面时判断是否丢失,如果丢失就在localStorage中取出.
vuex-persistedstate 插件实现数据持久化

cnpm i vuex-persistedstate -S

之后在store.js中导入

import createPersistedState from 'vuex-persistedstate'
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions,
  plugins: [createPersistedState()]
)}

5.map辅助函数

• mapActions:
  在组件中导入import { mapActions } from ‘vuex’
  
• mapGetters:
  import { mapGetters } from ‘vuex’