vue3集成pinia（支持UniApp）

一. 介绍

        vue3下的全局状态处理，官方推荐pinia，具体介绍见官网

        简介 | Pinia

二. 安装pinia

npm install pinia

三. 集成

1. 新建store文件夹，vue3项目在src目录下，uniapp在项目根目录下

2. store目录下新建index.js，具体内容如下

import {
	createPinia
} from 'pinia'

const store = createPinia()

export default store

3. main.js引入pinia

vue3项目引入

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

import './assets/main.css'

const app = createApp(App)
app.use(store)
app.mount('#app')

uniapp引入

import App from './App'

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
import store from './store'
export function createApp() {
	const app = createSSRApp(App)
	app.use(store)
	return {
		app
	}
}
// #endif

四. 使用pinia

1. 举例使用,登陆模块

store目录下，新建login.js，建议方法命名方式为usexxxStore，下面定义了方法和变量，导出之后即可在其他页面使用

import {
	defineStore
} from 'pinia'
import {
	ref
} from 'vue'

export const useLoginStore = defineStore('loginStore', () => {
	const token = ref('')
	const isLogin = ref(false)

	token.value = ''
	isLogin.value = !!token.value

	const login = (tokenVal) => {
		token.value = tokenVal
		isLogin.value = !!tokenVal
	}

	const logout = () => {
		token.value = ''
	}

	return {
		token,
		isLogin,
		login,
		logout,
	}
})

2. 其他页面使用

// 1. 在使用页面引入要使用的store
import { useLoginStore } from '@/store/login.js'

// 2. 在setup中调用方法
const store = useLoginStore()

// 3. 在具体业务逻辑中直接调用

// 例如, 调用字段
const isLogin = store.isLogin

// 或
if (store.isLogin) {
    
}
// 调用方法
store.login('token')