vuex的使用和持久化

vuex的持久化

安装依赖

npm install vuex-persistedstate -S

store中引用

// 配置vuex-persistedstate组件-store/index.js文件内修改

// store/index.js
import Vue from 'vue';
import vuex from 'vuex';
import getters from './getters'
import mutations from './mutations'
import createPersistedState from 'vuex-persistedstate';
Vue.use(vuex);

const PATHS = ['usrInfo', 'configInfo','roleInfo', 'roleList', 'roleRight'] // 对应gettters.js里面
//localStorage缓存,需要手动删除或者重新赋值才会修改

// 创建plugins
const vuexLocal = createPersistedState({
  key: 'vuexLocal',
  storage: window.localStorage, // window.sessionStorage  //会话关掉,数据清空
  paths: PATHS
});

const store = new vuex.Store({
	state: {
        uesrInfo: '',
        configInfo: '',
        roleInfo: ''
    },
	getters: {getters},
    mutations: {mutations},
    actions: {},
    modules: {},
    plugins: []
})
export default store

vuex的几种属性

getters

• 类似于计算属性
• getters有两个参数
  • 依据state里面的属性，加工过后暴露给外面
  • 当前getters对象，用于将getters下的其他getter拿来用

// getters.js 
const getUsrInfo = state => {
    return state.uesrInfo
}
const getConfigInfo = state => {
    return state.configInfo
}
const gotRoleInfo = (state, getters)=> {
    return getters.roleInfo + state.roleInfo
}
export default {
    getUsrInfo,
    getConfigInfo,
    gotRoleInfo
}

mutations

• mutations是操作state数据的方法的集合，比如对该数据的修改、增加、删除等等。
• 参数state state是当前VueX对象中的state

// store/mutations.js

export const setUserInfo = (state, param) {
    state.userInfo = param.userInfo 
}
export const setConfigInfo = (state, param) {
    state.configInfo = param.configInfo 
}
export const setRoleInfo = (state, param) {
    state.roleInfo = param.roleInfo 
}

actions

• 由于直接在mutation方法中进行异步操作，将会引起数据失效。
• 所以提供了Actions来专门进行异步操作，最终提交mutation方法。
• 用于异步处理数据，mutations只能同步处理数据
• 参数context 相当于箭头函数中的this

// actions.js
initUserInfo(context,payload) {
    return new Promise(async (resolve, reject) => {
    	alert('这是参数', payload)
        const {data: {data, flag}} = await httpServer.get(url, {id: 2});
        (!flag || !data) && reject('获取用户信息失败');
        context.commit('setUserInfo ', data || payload);
        resolve();
    })
},

调用

// 使用辅助函数调用
import {mapGetters, mapActions, mapMutations} from 'vuex'
methods: {
	// 扩展后的mutations和actions，使用起来都是和调用方法一样,比如 this.initUserInfo()
	...mapMutations(["setUserInfo","setConfigInfo","setRoleInfo"])
	...mapActions(["initUserInfo"])
},
computed: {
    ...mapGetters({
        'userInfo': 'getUsrInfo',
        'configInfo': 'getConfigInfo',
        'roleInfo': 'getUserId',
    }),

	// 简写
	...mapGetters(["getUsrInfo","getConfigInfo","getRoleInfo"])
}

// 直接调用mutations
this.$store.commit('setUserInfo', {userInfo: '这是用户信息'}) // 传了参数20
this.$store.commit({
    type:'setUserInfo',
    payload:{userInfo: '这是用户信息'}
})

// 直接调用actions
this.$store.dispatch('initUserInfo',{age:15})

// 直接调用getters
this.$store.getters.getUsrInfo // 和使用state的属性一样