最后
正值招聘旺季,很多小伙伴都询问我有没有前端方面的面试题!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
最简单的做法就是利用插件 vuex-persistedState
。
1. 安装
cnpm install vuex-persistedState -S
备注:
-S
是--save
的简写,意为:把插件安装到dependencies
(生产环境依赖)中
-D
是--save-dev
的简写,意为:把插件安装到devDependencies
(开发环境依赖)中
2. 使用
import createPersistedState from ‘vuex-persistedstate’
const store = new Vuex.Store({
state,
mutations,
actions,
getters,
plugins: [createPersistedState({
storage: sessionStorage,
key: “token”
})]//会自动保存创建的状态。刷新还在
})
参数:
storage:存储方式。(sessionStorage,localStarage) key:定义本地存储中的key
5. 高级语法---- 模块化管理数据 (modules)
1. 什么时候需要用到模块
管理vuex数据。
项目庞大,数据信息量特别大的时候,我们可以考虑分模块形式管理数据,比如user模块管理用户信息数据,cart模块管理购物车数据,shop模块管理商品信息数据。
import vue from ‘vue’
import Vuex from ‘vuex’
Vue.use(vuex);
const state= ()=>{ token:‘’}
const actions = {
set_token({commit},val){
commit(“to_token”,val)
}
}
const mutations = {
to_token(state,val){
state.token=val;
}
}
const getters = {}
//user模块
let user = {
namespaced: true, //一定要开始命名空间。
state: { userid: 1234 },
actions: {
},
mutations: {
SET_USERID(state, val) {
state.userid = val;
}
},
getters: {
}
}
//购物车数据的模块
let cart = {
namespaced: true,
state: { userid: 567 },
actions: {
},
mutations: {
},
getters: {
}
}
const store = new Vuex.Store({
state,
mutations,
actions,
getters,
modules: {
user,
cart
},
plugins: [createPersistedState({
storage: sessionStorage,
key: “token”
})]//会自动保存创建的状态。刷新还在
})
export default store
home.vue如何使用
获取user模块的userid
this.$store.state.user.userid
this.$store.commit(“user/SET_USERID”,12345)// 前面是指定模块user 中的SET_USERID 方法,后面是传参 可以是对象、数组、字符串等
6. 高级用法----- 辅助函数(语法糖)
1. 有那几个辅助函数(4大金刚)
mapState,mapActions,mapMutations,mapGetters
2. 辅助函数可以把vuex
中的数据和方法映射到vue组件
中。达到简化操作的目的
3. 如何使用
home.vue
{{ token }}
{{ token - x }}