uniapp下pinia配置

以下示例是在Uniapp的vue3项目测试

1.在目录中的main.js中添加

import * as Pinia from 'pinia'    //main.js最前面一行添加

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.use(Pinia.createPinia())    //在上面一行下添加本行
  return {
    app,
    Pinia,                        //本行也需要添加
  }
}
// #endif

2.新建stores目录,并在目录下新建一个couter.js文件,文件内容如下

import {ref,computed} from 'vue'
import {defineStore} from 'pinia'    
//useCountStore是下一步中导入时用到的名字
export const useCountStore =defineStore('count',()=>{
    const a=ref(0)    //用了ref所以上面要引入vue中的ref,下面的computed一样的原因
    a.value=0
    const da=computed(()=>count*2)    //匿名函数()=>{count*2    }中不能带花括号
    function addS(){
        a.value++
        console.log("in js:a="+    a.value)
    }
    return{
        a,da,addS                    //一定要返回所有的变量方法
    }
})

3.在要使用的地方

先引入2中定义的pinia 

import {useCountStore} from "../../stores/counter"

然后就可以在页面或组件中使用了.

   const tem=useCountStore()    //2中说的那个名字
    //tem.a++
    tem.addS()
    function cc(){
        tem.addS()
    }