vue3中使用vuex踩坑指南（从入门到使用完成）

这篇文章针对于没有使用过vuex，第一次使用vuex的小伙伴，在网上看了一些教程之后我开始使用了vuex，我们目前演示一下获取操作user模块

安装vuex

//vuex包
npm install vuex@next --save
//持久化包
npm i vuex-persistedstate

先在src下新建store目录新建index.js入口文件

import { createStore } from "vuex";
import user from './modules/user.js';
import createPersistedstate from 'vuex-persistedstate'

export default createStore({
	modules:{
		user,
	},
	plugins:[
		createPersistedstate({
			key:'AIAPI-store',
			paths:['user']
		})
	],
});

在src目录下的store目录下新建modules文件夹，再在文件夹下新增user.js文件

export default {
	namespaced: true,
	state() {
		return {
			// 用户信息
			profile: {
				id: '',
				username: '22222222张三',
				password: '',
				avatar: '',
				token: '',
			}
		};
	},
	getters: {

	},
	//里面定义方法，操作state方发
	mutations: {
		// 添加值
		setUser(state,payload){
			const { key,value } = payload;
			console.log('payload:',payload);
			state.profile[key] = value
		},
		// 获取属性中的值
		getUser(state,payload){
			const { key } = payload;
			 const value = state.profile[key];
			 console.log('value:',value);
			 return value
		},
		// 删除属性
		deleteUser(state,payload){
			const { key } = payload;
			console.log('key:',key);
			delete state.profile[key]
		}
	},
	// 操作异步操作mutation
	actions: {

	},
	modules: {

	},

}

前往项目中的main.js中引入vuex配置文件

import store from './store'
app.use(store) //注册vuex

引入之后就可以在vue3中使用了

使用的时候先导入再拿值

//在script中引入
import {useStore} from "vuex"
const store = useStore();
//在script中使用获取值
const token = store.state.user.profile.token
//在template中获取值的方式一样
{{ store.state.user.profile.username }}
//在template中更新用户名
@click="store.commit('user/setUser',{key:'username',value:'用户名'})"

学到这里你已经基本学会了vuex的使用。

踩坑1，使用vuex-persistedstate包进行持久化操作，跑通项目单纯使用vuex中的值，不调用user中的mutations中的方法不会把数据持久化到本地浏览器中。

//这样赋值虽然能成功 但不持久化
store.state.user.profile.username == '用户名';

//正确的方式调用user包中的mutations方法中的方法
store.commit('user/setUser',{key:'password',value:logoinform.value.password})

踩坑2，项目使用了router在router目录中的文件和.vue文件获取值方式不一样，要通过引入@/store才能获取值

//在router的index.js获取vuex中的值
import store from "@/store"
const tokenStr = store.state.user.profile.token;

//在项目的页面获取值的方式
import {useStore} from "vuex"
const store = useStore();
const tokenStr = store.state.user.profile.token

踩坑3，项目中vue3与vue2的获取值的方式不一样，这个需自行研究，我的项目是采用vue3的