uni-app默认使用的vue2,这次新项目,不能再墨守成规,改成了vue3,之前的store引入方式等都要改了。
1、新建 store/index.js,代码如下:
import Vuex from 'vuex' const store = new Vuex.Store({ state: { userInfo:'', token:'测试token' }, mutations: { // 登录 login(state, data) { state.token = data; uni.setStorage({ key: 'token', data: data }); } }, actions: {} }) export default store
2、main.js引入,use使用,并定义成公共方法:
import App from './App' //引入vuex import store from './store' import { createSSRApp } from 'vue' export function createApp() { const app = createSSRApp(App) // 定义公共方法,使用方法和之前Vue.prototype.$store定义的一样,避免每次使用store都要引入 app.config.globalProperties.$store = store // use store app.use(store) return { app } }
3、在非composition api和非setup语法糖中使用:
onLaunch: function() { // 调用store里的方法 this.$store.commit('login', 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9') // 使用store里的值 console.log(this.$store.state.token) }
4、在composition api或setup语法糖中使用
import {getCurrentInstance} from 'vue' const { proxy } = getCurrentInstance();//获取公用方法proxy.$axios,或者use中方法 const {$store}=proxy // 调用store里的方法 $store.commit('login', 'Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9') // 使用store里的值 console.log($store.state.token)