(一)vscode搭建springboot后端项目
(二)vscode搭建vue前端项目
(三)调整vue项目src文件夹的基本结构
(四)编写layout的头部栏和侧边栏
使用vuex存放用户信息
一、创建文件夹store,在store文件夹中创建modules文件夹,在其中编写userInfo.js用以存放全局的userInfo
// userInfo.js
const state = {
userInfo: {},
}
// getters
const getters = {
userInfo: (state) => state.userInfo,
}
// mutations
const mutations = {
SET_USERINFO: (state,userInfo) => {
state.userInfo = userInfo
},
}
//actions
const actions = {
set_userInfo({ commit }, userInfo) {
commit('SET_USERINFO', userInfo)
},
}
export default {
state,
getters,
actions,
mutations,
}
二、编写store文件夹下的index.js,导入userInfo模块
import Vue from 'vue'
import Vuex from 'vuex'
// 导入各个模块的初始状态和 mutations
import userInfo from "./modules/userInfo";
Vue.use(Vuex)
export default new Vuex.Store({
// 组合各个模块
modules: {
userInfo
},
})
三、在main.js中导入store
四、出现问题“Module not found: Error: Can’t resolve ‘module’”,解决方法:npm install module
,再出现问题“Module not found: Error: Can’t resolve ‘vuex’”,解决方法:npm install vuex
,接着无报错
五、注意引入userInfo模块时不能使用花括号,因为export时使用了default
六、使用示例
// 1.引入vuex的辅助函数
import { mapGetters, mapActions } from "vuex";
// 2.在computed中通过getters获取userInfo
computed:{
...mapGetters(['userInfo'])
},
// 3.在methods中获取userInfo的actions方法
...mapActions(["set_userInfo"]),
// 4.通过actions方法设置userInfo的值
this.set_userInfo({
token: 'NXJANSJX',
img: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1111938570,2063449563&fm=26&gp=0.jpg',
name: '望学庭'
})