情头定制网站_英文seo优化包年费用_百度ai助手入口_电商软文范例

前言：

• 为了方便保存用户登录状态，需要选择使用状态机来存用户信息
• uni-app项目中默认就已经下载好了Vuex和Pinia状态机，可以直接在项目中进行状态机的配置和使用
• vue3项目Vuex和Pinia都可以用，vue2项目只能用Vuex

一、配置Pinia

1、创建配置文件

在项目目录下新建stores目录，在新建user.js

stores|--- user.js

 2、全局挂载Pinia

在main.js中进行以下配置：

import App from './App'
import store from './store/index.js'
import uviewPlus from 'uview-plus'
import * as Pinia from 'pinia';// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({store,...App
})
app.$mount()
// #endif// #ifdef VUE3
import {createSSRApp
} from 'vue'
export function createApp() {const app = createSSRApp(App)app.use(Pinia.createPinia());app.use(uviewPlus)return {app,Pinia // 此处必须将 Pinia 返回}
}
// #endif

 主要看与Pinia相关的三句,将这三句放到适当的位置就行

import * as Pinia from 'pinia';app.use(Pinia.createPinia());Pinia // 此处必须将 Pinia 返回

 3、配置仓库

这里其实就和我们在vue3项目中使用Pinia一样了

stores---user.js：

import {defineStore
} from 'pinia';
import api from '../api'export const useUserStore = defineStore('user', {state: () => {return {userInfo: {}};},actions: {// 发送请求async getUserInfoAsync() {const res = await api.getUserInfo();if (res.code == 200) {this.userInfo = res.data;}}},
});

 4、组件中使用Pinia

因为用户信息需要在进入小程序时就应该校验的，所以在app.vue中发送请求获取用户信息：

<script setup>import {onLaunch} from '@dcloudio/uni-app';import {useUserStore} from './stores/user';const userStore = useUserStore();onLaunch(() => {//小程序初始化时执行console.log('App Launch')userStore.getUserInfoAsync()})
</script><style lang="scss">@import "uview-plus/index.scss";/*每个页面公共css */page {/* background-color: aqua; */}
</style>

取state的数据：（这个视项目情况而定，在什么时候去做判断）

import { useUserStore } from './stores/user';const userStore = useUserStore();console.log(userStore.userInfo)