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

这篇具有很好参考价值的文章主要介绍了uniapp中使用pinia （针对于uniapp创建vue3项目，uniapp创建vue2项目此方法不可用）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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中存储的状态的和一系列操作了文章来源地址https://www.toymoban.com/news/detail-505594.html

<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>

到了这里，关于uniapp中使用pinia （针对于uniapp创建vue3项目，uniapp创建vue2项目此方法不可用）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！