pinia

一 main.js

//1.引入pinia实例
import { createPinia } from 'pinia'
//2.创建pinia实例
app.use(createPinia())

二 stores/counter.ts

import { ref, computed } from 'vue'
import { defineStore } from 'pinia

//useCounterStore 仓库名   defineStore para1 counter 标识id
 export const useCounterStore = defineStore('counter', () => {

  const name1=ref(localStorage.name1 || '');
  const name2=ref(localStorage.name2 || '');

  function getName(a:string,b:string) {
    name1.value=a;
    name2.value=b;
  }
  return { getName, name1, name2}
})

三 引入到需要用的组件 Bread。vue

 <template>
    <div >
        <el-breadcrumb separator="/" style="margin-top: 20px;">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">{{ counterStore.name1 }}</a></el-breadcrumb-item>
            <el-breadcrumb-item>{{ counterStore.name2 }}</el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>


<script lang="ts" setup>
import { useCounterStore,useCounterStore2 } from  '../stores/counter.ts';
const counterStore = useCounterStore();  //仓库实例
const useStore2=useCounterStore2();
console.log(counterStore.name1);
console.log(counterStore.name2);

</script>

4.如需要可挂到全局 main.js

 import Bread from './components/Bread.vue'
 app.component('Bread',Bread);