【三】鸡汤来咯开发学习笔记-42

1.pinia是统一集中管理数据，任何一个页面都能调用
pinia使用教程https://uniapp.dcloud.net.cn/tutorial/vue3-pinia.html

一 在main.js中修改

    import App from './App'
    import * as Pinia from 'pinia';      加上这行
    // #ifndef VUE3
    import Vue from 'vue'
    import './uni.promisify.adaptor'
    Vue.config.productionTip = false
    App.mpType = 'app'
    const app = new Vue({
      ...App
    })
    app.$mount()
    // #endif
    
    // #ifdef VUE3
    import { createSSRApp } from 'vue'
    export function createApp() {
      const app = createSSRApp(App); 
      app.use(Pinia.createPinia());              加上这行
      return {
        app,
        Pinia, // 此处必须将 Pinia 返回            加上这行
    }
}
    // #endif

二，创建stores文件夹，里面加入counter.js
内容为

import{ref} from "vue"
import{defineStore} from "pinia";

export const useCounterStore = defineStore('counter', () => {
    const count = ref(0);
    const username =ref("tt将")
    function increment() {
        count.value++;
    }

    return { count, increment };
});

实例如

在其他页面引用

import { useCounterStore } from "../../stores/counter";
const CounterStore=useCounterStore();

如我在首页和个人中心页引用，我们在首页用increment()方法改变了值，个人中心页也就会同步改变，同理反之也可以