Pinia使用案例

爱学习的前端歌谣

发布于 2023-10-24 15:04:27

1620

发布于 2023-10-24 15:04:27

文章被收录于专栏：前端小歌谣

前言

大家好我是歌谣今天给大家带来Pinia的讲解

安装vite程序

yarn create vite

main.ts

import { createApp } from 'vue'
import './style.css'
import {createPinia} from "pinia"
import App from './App.vue'
const pinia=createPinia()
createApp(App).use(pinia).mount('#app')

HelloWorld.vue

<script setup lang="ts">
import { ref } from 'vue'
import { useCounterStore,useMsgStore } from '../store/index';
defineProps<{ msg: string }>()
const counter=useCounterStore()
const useMsg=useMsgStore()
const count = ref(0)
</script>


<template>
  <h1>{{ msg }}</h1>


  <div class="card">
    <h2>{{ useMsg.msg }}</h2>
    <button type="button" @click="counter.increment">count is {{ counter.count }}</button>
    
  </div>


</template>


<style scoped>
</style>

index.ts

import { defineStore } from "pinia";
import {ref} from 'vue'
export const useCounterStore=defineStore('counter',{
    state:()=>{
        return {count:0}
    },
    getters:{
        double:(state)=>state.count*2
    },
    actions:{
        increment(){
            return this.count++
        }
    }
})


export const useMsgStore=defineStore('msg',()=>{
    const msg=ref('geyao')
    function changeMsg(){
        msg.value+='world'
    }
    return {msg,changeMsg}
})

运行结果