初步了解vue3 的pinia 用法

大家好，我是mylinx，一个无业到中年neter，从去年年底就已经无业到现在，所以趁着空档期，学习一些前端知识。vue3我有过项目经验，但是对于pinia的知识相知甚少，因此，今天就在B站学习了一下，在此做个记录。 其实对于pinia ，基本上是可以跟着官方文档学习，我这里做记录仅仅是增加印象。现在我们开始学习吧。 

如何使用pinia ，分为以下步骤：

第一步：引入pinia 依赖， npm install pinia 

第二步：  在mian.ts /main.js 文件中引入。

import { createPinia } from 'pinia'
const pinia=createPinia()
createApp(App).use(pinia).mount('#app')

 第三步：新建一个store文件夹，在创建ts文件，文件内容如下：

//1.引入pinia
import {defineStore } from 'pinia'
import { ref,computed } from 'vue'

//定义并导出useCounter
export const userCounter=defineStore('counter',()=>{
   
   //数据state
    const count =ref(0)

    //属性计算
    const doubleCount=computed(()=>{
      return count.value *2
    })

    //修改数据的方法action
    const increment=()=>{
        count.value++;
    }


    //一定要记得把需要使用的方法和属性暴露（return）出来
    return{ count,increment,doubleCount}

})

第四步：pinia使用

//引入你的store文件
import { userCounter } from '../store/userCount'

//获取对象
const counterStore=userCounter();


//使用对象

<template>
  <div class="card">
    <button type="button" @click="counterStore.increment">测试store</button>

    <span>{{ counterStore.count }}</span>
    <span>双倍Count:{{ counterStore.doubleCount }}</span>
  </div>
</template>

目前就是么一个用法。后续会讲到解构和异步。