Vue状态管理工具Pinia的安装与使用教程
作者：Dorable_Wander
这篇文章主要介绍了Vue状态管理工具Pinia的安装与使用,一步一步学习如何将pinia运用到项目实战中去,文中有详细的安装教程和使用方法,并通过代码示例讲解的非常详细,需要的朋友可以参考下
一、环境搭建
1.创建项目
环境搭建还是沿用vite构建项目的方法，不知道怎么构建的小伙伴可以去vue专栏找找看哦~（用vite构建vue项目还是非常轻量快捷的！！强烈推荐使用！！）
我们依然使用npm包指令来使用vite构建项目，在命令行输入以下指令即可
npm init vite
输入后根据提示选择vue项目，选择TypeScript语言构建项目即可。
2.安装pinia
安装pinia的方法有很多，可以用npm，可以用yarn，我们还是沿用npm包进行安装。
npm install pinia
在命令行输入以上指令后，等待安装成功即可。安装成功后，在package.json文件中，查看下载的依赖，如果有pinia和对应的版本号，即为下载成功。
二、基本使用
创建完vue项目并且成功安装pinia之后，我们首先要做的，一定要创建pinia实例，并将其全局挂载！！（不论是pinia还是其他的依赖，只要你需要使用，并且使用频率很频繁，都建议全局挂载）
1.创建pinia示例并挂载
// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
// 创建pinia实例
const pinia = createPinia()
// 挂载到根实例上
createApp(App).use(pinia).mount('#app')
2.基本使用
访问state
我们可以直接通过state.访问
const store = useStore() store.counter++
使用getters
要注意，在pinia中，Getters和state里面不能使用相同的名字
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
getters: {
doubleCount: (state) => state.counter * 2,
},
})
使用actions
export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
actions: {
increment() {
this.counter++
},
randomizeCounter() {
this.counter = Math.round(100 * Math.random())
},
},
})
3.详细示例（详细注解）
// store/index.ts
import { defineStore } from "pinia"
// 1.定义并导出容器
// 参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到根容器，每个容器的名字就是这里的ID
export const useMainStore = defineStore('main', {
/**
* 类似与组件的data， 用来存储全局状态
* 1.必须是函数：这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染（客户端其实无所谓）
* 2.必须是箭头函数：为了更好的ts类型推导
* 返回值：一个函数，调用该函数即可得到容器实例
*/
state: () => {
return {
count: 100,
foo: 'bar',
arr: [1, 2, 3]
}
},
/**
* 类似于组件的computed，用来封装计算属性，有【缓存】功能
*/
getters: {
// 每个函数接受一个可选参数：state状态对象
// count10(state) {
// console.log('count10()调用了');// 具有缓存功能
// return state.count + 10
// }
// （不建议）如果不使用state而使用this，此时就不能对返回值类型做自动推导了，必须手动指定
count10(): number {
return this.count + 10
}
},
/**
* 完全类比于Vue2组件中的methods（可以直接用this)，用来【封装业务逻辑】，修改state
*/
actions: {
/**
* 注意！！不能使用箭头函数定义actions！！一定要用普通函数！！！
* why？因为箭头函数绑定了外部this
*/
changeState(num: number) {
// 可以直接使用this，像极了Vue2
// this.count++
// this.foo = 'hello'
// this.arr.push(4)
// 对于批量修改，建议使用patch做优化
this.$patch((state) => {
state.count += num
state.foo = 'hello'
state.arr.push(4)
})
}
}
})
// 2.容器中的state
// 3.修改state
// 4.actions的使用
现在我们可以打开App.vue，去掉对我们没用的东西，直接使用项目初始化时产生的HelloWorld.vue组件。
<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>
<template>
<HelloWorld />
</template>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
下面是HelloWorld.vue中的内容：
<template>
<p>{{ mainStore.count }}</p>
<p>{{ mainStore.foo }}</p>
<p>{{ mainStore.arr }}</p>
<p>{{ mainStore.count10 }}</p>
<p>{{ mainStore.count10 }}</p>
<p>{{ mainStore.count10 }}</p>
<hr />
<p>{{ count }}</p>
<p>{{ foo }}</p>
<p>
<button @click="handleChangeState">修改数据</button>
</p>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useMainStore } from '../store'
// 【哪里使用写哪里】，此时要在HelloWorld组件中用，那就写这里。这很Composition API
const mainStore = useMainStore()
// 禁止！这样会丧失响应性，因为pinia在底层将state用reactive做了处理
// const { count, foo } = mainStore
// 解决方案：将结构出的数据做ref响应式代理
const { count, foo } = storeToRefs(mainStore)
const handleChangeState = () => {
// ==============数据修改的几种方式=============
// 方式一：直接修改
// mainStore.count++
// 方式二：使用 $patch(对象) 批量修改，建议使用，底层做了性能优化
// mainStore.$patch({
// count: mainStore.count + 1,
// foo: 'hello',
// arr: [...mainStore.arr, 4] // 这就不优雅了，所以有了方式三
// })
// 方式三：使用 $patch(回调函数)，这个更优雅，墙裂推荐！！！
// 回调函数中的state参数，就是Store定义时里面的state!
// mainStore.$patch((state) => {
// state.count++
// state.foo = 'hello'
// state.arr.push(4)
// })
// 方式四：逻辑较为复杂时，应封装到Store的actions中，并对外暴露接口
mainStore.changeState(10)
}
</script>
以上就是关于pinia安装和使用的知识分享，相信看完这篇文章的小伙伴们一定能运用这些方法在项目开发中。当然，可能有不足的地方，欢迎大家在评论区留言指正！
到此这篇关于Vue状态管理工具Pinia的安装与使用的文章就介绍到这了,更多相关Vue Pinia安装与使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！