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}
})

 运行结果

总结

我是歌谣 想加入最强前端学习交流群找我联系方式

点击上方蓝字关注我们

点个在看你最好看

下方查看历史文章

Vuex讲解

DOM-Diff讲解

javascript树形结构化

原生+TS实现todolist效果

Vue3+typesctipt实现todolist效果