vuex是什么

vuex是状态存储管理模式，可以存放公共的数据和方法

vuex由什么属性构成

state、getters、mutations、actions、modules

五个属性的作用

state：用来存储公共数据，相当于vue的data
getters：计算属性，相当于vue的computed
mutations：用于存放公共方法，相当于vue的methods
actions：用来提交mutations
modules：用于将前面四个属性进行细分，更便于使用

mutations和actions的区别

mutations：用于处理同步事务
actions：处理异步（setTimeout）

vuex如何做持久化存储

1. 方法一

state () {
    return {
      count: localStorage.getItem('count') ||1
    }
  },
mutaitons:{
    add(state){
        state.count++;
        localStorage.setItem('count',state.count)
    }
}
  

2. 方法二

npm i vuex-persistedstate
import { createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'
 
import user from './modules/user'
import cart from './modules/cart'
 
export default createStore({
  modules: {
    user,
    cart
  },
  plugins: [
    createPersistedstate({
      key: 'erabbit-client-pc-store',
      paths: ['user', 'cart']
    })
  ]
})

===> 默认是存储在localStorage中

===> key是存储数据的键名

===> paths是存储state中的那些数据，如果是模块下具体的数据需要加上模块名称，如**user.token**