vue3中如何使用pinia,两种模式

使用方式一

一、安装pinia, 并在main.js引入

npm install pinia


//main.js
import { createPinia } from 'pinia'
var app = createApp(App)
app.use(createPinia()) //注册pinia插件
app.mount('#app')

二、创建store 创建文件tabbarStore.js

//tabbarStore.js  //用于隐藏显示tabbar
import {defineStore} from 'pinia'
import {ref} from 'vue'
//第一个参数是唯一storeId
const useTabbarStore = defineStore("tabbar",()=>{
    // ref包装定义的就是 state
    const isTabbarShow = ref(true)

    const change = (value)=>{
        isTabbarShow.value = value  //修改
    }
    return {
        isTabbarShow,
        change
    }
})

export default useTabbarStore

三。vue文件中使用

<script setup>
	import { onMounted,onBeforeMount,onBeforeUnmount } from 'vue';
	import useTabbarStore from '../store/tabbarStore';  //引入
	
	const store = useTabbarStore()
	
	onBeforeMount(()=>{
	    store.change(false)  //挂载前隐藏
	})
	
	onBeforeUnmount(()=>{
	    store.change(true)   //页面卸载后显示
	
	})

</script>

使用方式二

一、安装pinia, 并在main.js引入

npm install pinia


//main.js
import { createPinia } from 'pinia'
var app = createApp(App)
app.use(createPinia()) //注册pinia插件
app.mount('#app')

二、创建store 创建文件tabbarStore.js

import {defineStore} from 'pinia'

//第一个参数是唯一storeId
const useTabbarStore = defineStore("tabbar",{
    //option Store 
    state:()=>({
        isTabbarShow:true
    }),

    actions:{
        change(value){
            this.isTabbarShow = value
        }
    }
    // getters
    // actions
})

export default useTabbarStore

三、vue文件中使用

<script setup>
import { onBeforeMount,onBeforeUnmount } from 'vue';
import useTabbarStore from '../store/tabbarStore';

const store = useTabbarStore()

onBeforeMount(()=>{ //页面挂载前
     //store.isTabbarShow = false
     store.$patch({
        isTabbarShow:false
     })
})

onBeforeUnmount(()=>{  //卸载隐藏
    //store.isTabbarShow = true
     store.$patch({
         isTabbarShow:true
     })

    // store.$reset()
})

</script>