uniapp中使用pinia （针对于uniapp创建vue3项目，uniapp创建vue2项目此方法不可用）

最新推荐文章于 2024-05-15 10:25:29 发布

朱留坤

最新推荐文章于 2024-05-15 10:25:29 发布

阅读量2.9k

点赞数 1

文章标签： uni-app vue.js 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/zhu_liu_kun/article/details/129172061

版权

1安装pinia

如果新建项目，先初始化一下

npm init -y

npm install pinia --save

2 新建pinia store目录，并创建相关文件

名字自己定我的是pinia-store,在目录下新建index.js和login.js，代码如下

index.js 这是需要被main.js引用的如同与vue3项目中index.ts中引入的pinia

import { createPinia } from 'pinia'

const store = createPinia()

export default store

再建一个存储状态的文件(login.js)

export const useloginStore = defineStore({
  id: 'login', // id必填，且需要唯一
  state: () => {
    return {
      userName: uni.getStorageSync('userName') ? uni.getStorageSync('userName') : '未登录'
    }
  },
  // actions 用来修改 state
    actions: {
      login(userName) {
          uni.setStorageSync('userName', userName)
          this.userName = userName
      },
      logout() {
          uni.clearStorage()
          this.userName = '已退出登录'
      }
    }
})

4 main.js中的修改

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App,
})
app.$mount()
// #endif

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

在vue组件中就可以操作pinia中存储的状态的和一系列操作了

<template>
    <view>
        <view>
            <button type="primary" @click="login('刘大根')">登录</button>
            <button type="default" @click="logout">退出</button>
        </view>
        <!-- <view>{{userName}}</view> -->
        <view>{{loginStore.userName}}</view>
    </view>
</template>

<script>
     
    引入存储pinia状态的文件
import { useloginStore } from '@/pinia-store/login'
const loginStore = useloginStore()

    export default {
        data() {
            return {
                loginStore:loginStore
            }
        },
        computed: {
            // ...mapState(['userName'])            
        },
        methods: {
            // ...mapActions(['login','logout'])
            login(userName){
                loginStore.login(userName)
            },
            logout(){
                loginStore.logout()
            }
            
        }
    }
</script>