uniapp安装使用pinia ,会出现以下报错

reportJSException >>>> exception function:createInstanceContext, exception:white screen cause create instanceContext failed,check js stack ->
 at useStore (app-service.js:2926:15)

这种情况不要慌,引入pinia请使用vue3.2语法糖写法。

// #ifdef VUE3   是main.js入口页面
import { createSSRApp } from 'vue'
import * as Pinia from 'pinia';

export function createApp() {
  const app = createSSRApp(App)
  app.use(Pinia.createPinia());
  return {
    app,
	Pinia, // 此处必须将 Pinia 返回
  }
}
// #endif
// stores/counter.js
import { defineStore } from 'pinia';
// 这里的 counter 似乎没有作用,可以更换成任意名称。
export const useCounterStore = defineStore('counter', {    // 定义要状态数据
    state: () => {
        return { count: 0 }; // 这里可以放入多个共享数据,比如: {count: 0, operator: '+'}
    },
    // 也可以这样定义
    // state: () => ({ count: 0 })    // 定义方法
    actions: {
        increment() {
            this.count++;
        },
    },
});
// 页面代码
<template>
	<view class="content">
		<view class="text-area" @click="Store.increment">
			<text class="title">{{title}}</text>
			{{Store.count}}
		</view>
	</view>
</template>

<script setup >
	import { ref } from "vue"
	import { useCounterStore } from '@/stores/counter';
	const Store = useCounterStore();
	const title = ref("hello 程序员")
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}


	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

Logo

前往低代码交流专区

更多推荐