Java程序员不得不会的面试题（含答案）

1、首先安装vuex-persistedstate
npm i vuex-persistedstate
2.1、store中的index.js模块中的内容如下：
import {
createStore } from 'vuex'
import createPersistedstate from 'vuex-persistedstate'
import user from './user'
export default createStore({
state: {
name: 'jjw'
},
// getters: {
// },
mutations: {
changeName (state, data) {
state.name = data
}
},
// actions: {
// },
modules: {
// User,
user
},
plugins: [
createPersistedstate({
key: 'myUser',
paths: ['user'] // 将user整个模块中的state都缓存下来
})
]
})
2.2 和index.js同级新建user.js，其中的内容如下：
export default {
namespaced: true,
state: () => {
return {
// 用户信息
profile: {
id: '',
nickname: ''
}
}
},
getters: {
// 有效商品列表
nick_name (state) {
const len = state.profile.nickname?.length
// 有效商品：库存大于0  stock  商品有效标识为  true  isEffective
return state.profile.nickname?.substring(0, 2) + '*****' + state.profile.nickname?.substring(len - 4, len)
},
// 获取其他模块中的 下边这个getters就相当于最上边这个getters
get_nick_name (state, getters) {
const len = state.profile.nickname?.length
return getters.nick_name?.substring(0, 2) + '=====' + state.profile.nickname?.substring(len - 4, len)
}
},
mutations: {
// 修改用户信息，payload就是用户信息对象
setUser (state, payload) {
state.profile = payload
}
}
// actions: {
//   // 合并购物车  在这里边也可以使用async await
//   async mergeCart (ctx) {
//     // 准备合并的参数
//     const cartList = ctx.state.list.map(goods => {
//       return {
//         skuId: goods.skuId,
//         selected: goods.selected,
//         count: goods.count
//       }
//     })
//     await mergeCart(cartList)
//     // 合并成功，清空本地购物车
//     ctx.commit('setCart', [])
//   },
//   // 批量删除
//   batchDeleteCart (ctx, isClear) {
//     return new Promise((resolve, reject) => {
//       if (ctx.rootState.user.profile.token) {
//         // 已登录
//         const ids = ctx.getters[isClear ? 'invalidList' : 'selectedList'].map(item => item.skuId)
//         deleteCart(ids).then(() => {
//           return findCart()
//         }).then(data => {
//           ctx.commit('setCart', data.result)
//           resolve()
//         })
//       } else {
//         // 未登录
//         // 找出选中的商品列表，遍历调用删除的mutations
//         // isClear 未 true  删除失效商品列表，否则事选中的商品列表
//         ctx.getters[isClear ? 'invalidList' : 'selectedList'].forEach(item => {
//           ctx.commit('deleteCart', item.skuId)
//         })
//         resolve()
//       }
//     })
//   },
// }
}
3、main.js中导入并挂载
import store from './store'
.use(store)
4、app.vue中的内容如下：
<template>
<div>{
{$store.state.name}}</div>
<button class="my-button" @click="changeIndexName">点击修index中的名字</button>
<div v-if="$store.getters['user/nick_name']" class="my-test">{
{$store.getters['user/nick_name']}}</div>
<div v-if="defaultName" class="my-test">{
{defaultName}}</div>
<div>{
{$store.state['user'].profile}}</div>
<div>{
{$store.state.user.profile}}</div>
<button class="add-user" @click="addUser">添加用户名</button>
<button class="my-button" @click="changeName">点击修改名字</button>
<button class="my-button" @click="$store.commit('user/setUser',{id:'1', nickname:'jzw'})">点击修改名字</button>
<button class="del-user" @click="delUser">删除用户</button>
<button class="del-user" @click="localCache">局部缓存</button>
<button class="del-user" @click="getCache">获取局部缓存</button>
<div>{
{age}}</div>
</template>
<script setup>
import {
reactive, ref } from 'vue'
import {
useStore } from 'vuex'
const store = useStore()
const defaultName = ref('')
const changeName = () => {
console.log(store.getters['user/get_nick_name'])
// defaultName.value = store.getters.user.get_nick_name
defaultName.value = store.getters['user/get_nick_name']
}
const changeIndexName = () => {
store.commit('changeName', 'jinjiwei')
}
const addUser = () => {
// const store = useStore()
const profile = reactive({
id: '01',
nickname: '我开心我快乐咋滴吧'
})
// store.commit('user/setUser', { id, account, avatar, mobile, nickname, token })
store.commit('user/setUser', profile)
// store.commit('setUser', profile)
}
const delUser = () => {
store.commit('user/setUser', {
})
// store.commit('setUser', {})
}
const age = ref(0)
// 用来局部设置localStorage
const localCache = () => {
window.localStorage.setItem('age', 19)
}
const getCache = () => {
age.value = window.localStorage.getItem('age')
}
</script>
<style lang="less">
.my-test{
height: 50px;
font-size: 30px;
}
</style>
结果如下：

1、首先安装vuex-persistedstate
npm i vuex-persistedsta