Vue3中的pinia使用，入门教程

__爱吃香菜

已于 2023-11-20 18:02:24 修改

阅读量254

点赞数

文章标签：前端

于 2023-11-20 13:42:25 首次发布

本文链接：https://blog.csdn.net/weixin_59763367/article/details/134502144

版权

文章目录

pinia组成部分

pinia使用流程

注意Store获取到后不能解构，否则失去响应式

一、pinia原理？

功能：管理全局共享数据，pinia与vuex功能一样
优势：pinia相对于vuex增加了对ts的支持，对响应式的支持

二、组成部分

State：存储共享的数据
Actions：可以包含任意异步操作，如axios，提交(dispatch)，action自动commit给mutation，保证所有数据同步更新，其他方法，会使部分数据失真
Mutations：pinia已取消，vuex中会有

1. pinia使用流程:

安装依赖，下载包

npm install pinia

在main.js中引入pinia并创建容器挂载到根实例上

//引入stores暴露出的pinia的实例
import pinia from './stores'

createApp(App).use(pinia).mount('#app')

创建stores文件夹和index.js文件（这个文件以后基本不用管了）

import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia

在stores文件夹下创建counter.js文件。这个文件就是存有关counter相关的数据。（类似vuex的模块化）
defineStore 是需要传参数的：

第一个参数是id，就是一个唯一的值，简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，第二个是 getters，第三个是 actions。

//定义关于counter的store
import {defineStore} from 'pinia'

/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，第三个是 actions。
*/
const useCounter = defineStore("counter",{
    state:() => ({
        count:66,
    }),
    
    getters: {

  	},

  	actions: {

  	}
})

//暴露这个useCounter模块
export default useCounter

注意：返回的函数统一使用useXXX作为命名方案，这是约定的规定。

然后再组件中使用：

<template>

<div>展示pinia的counter的count值：{{counterStore.count}}</div>

</template>

<script setup>
// 首先需要引入一下我们刚刚创建的store
import useCounter from '../stores/counter'
// 因为是个方法，所以我们得调用一下
const counterStore = useCounter()

</script>

1.2.注意Store获取到后不能解构，否则失去响应式

<template>
<div>展示pinia的counter的count值：{{counterStore.count}}</div>
<div>展示解构出来的pinia的counter的count值：{{count}}</div>
<button @click="addCount">count+1</button>
</template>

<script setup>
   import useCounter from '../stores/counter'

   const counterStore = useCounter()

   const {count} = counterStore
   function addCount(){
   //这里可以直接操作count，这就是pinia好处，在vuex还要commit在mutaitions修改数据
   counterStore.count++
   }
<script/>