前端歌谣-第十陆课-Pinia讲解

前言

大家好 我是歌谣 今天给大家带来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}
})

运行结果