uni-app vue3 store全局数据共享

1、新建项目时，勾选“Vue版本选择”->3:

2、在项目中新建 store/index.js，代码如下：

import {createStore} from 'vuex'
export default createStore({
state:{
    userInfo: {},
},
mutations:{
    // 登录
    login(state, data) {
        state.userInfo = data;
        uni.setStorage({
            key: 'userInfo',
            data: data
        });
        setTimeout(()=>{
            uni.switchTab({
                url: '/pages/index'
            })
        }, 800)
    }
    }
})

vuex不需要下载，直接使用即可。

3、配置main.js文件

import App from './App'
// 引入store
import store from './store'
// 添加到全局方法中，这样就不用在页面中引入了
uni.$store = store
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  // use store
  app.use(store)
  return {
    app
  }
}

4、在vue文件中使用：

<template>
<view>
    <view class='box1'>{{uni.$store.userInfo.username}}</view>
    <button @click="login">登录</button>
</view>
</template>

<script>
export default {
name:"test1",
data() {
  return {
  };
},
methods:{
  //按钮点击事件
  login(res){
    // 要想修改store里面state的值，使用commit
    store.commit('login', {
      username: 'admin',
      id: 1
    })
  }
  }
}
</script>