vuex知识点总结

什么是vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。通过vuex我们可以解决组件之间数据共享的问题，后期也方便我们管理以及维护

vuex的五大组成部分

state: 用来存状态
actions:可以包含异步操作
mutations: 唯一可以修改state数据的场所 this.$store.commit()
getters: 类似于vue组件中的计算属性，对state数据进行计算（会被缓存）,可以通过this.$store.getters来获取存放在state里面的数据
modules:模块化管理store（仓库），每个模块拥有自己的 state、mutation、action、getter

Vuex 的完整流程

组件中触发 Action，Action 提交 Mutations，Mutations 修改 State。 组件根据 State 或 Getters 来渲染页面

数据持久化

存储在vuex中的状态，刷新页面，会丢失。
为了解决刷新页面数据丢失，才有了数据持久化。
最简单的做法就是利用插件 vuex-persistedstate
安装
npm安装
npm install vuex-persistedstate -s
cnpm安装
cnpm install vuex-persistedstate -s
yarn安装
yarn add vuex-persistedstate -s

-S 是–save的简写，意为：把插件安装到dependencies（生产环境依赖）中
-D是–save-dev的简写，意为：把插件安装到devDependencies（开发环境依赖）中

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters,
  plugins: [createPersistedState({
    storage: sessionStorage,//storage:存储方式：（sessionStorage,localStarage）
    key: "token"//key:定义本地存储中的key
  })]//会自动保存创建的状态。刷新还在
})