Pinia 是一个专为 Vue 3 设计的状态管理库,它借鉴了 Vuex 的一些概念,但更加轻量灵活。下面将详细介绍如何使用 Pinia 状态管理库:
-
安装 Pinia
- 使用 npm:在项目目录下运行
npm install pinia
。 - 使用 yarn:在项目目录下运行
yarn
add pinia
。
- 使用 npm:在项目目录下运行
-
创建 Pinia 实例
- 在入口文件中引入并创建实例:在项目的入口文件(通常是
main.js
或main.ts
)中,导入并创建一个 Pinia 实例,然后将其挂载到应用程序上。
- 在入口文件中引入并创建实例:在项目的入口文件(通常是
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
//1.到入createPinia
import { createPinia } from 'pinia'
//2.执行方法得到实例
const pinia = createPinia()
//3.把pinia实例加入到app应用中
createApp(App).use(pinia).mount('#app')
2.自定义一个组件,该类编写在components/stores/counter.js
// 导入一个方法 defineStore
import {defineStore} from 'pinia'
import { ref } from 'vue'
export const useCounterStore = defineStore('counter',()=>{
const count = ref(0)
//定义修改数据的方法(active 同步 + 异步)
const increate = () =>{
count.value++;
}
//将对象的方法使用return供组件使用
return {
count,
increate
}
})
在App.vue中使用该组件
<script setup>
//1.导入 use 打头的方法
import { useCounterStore } from './stores/counter';
//2.执行方法得到store实例对象
const counterStore = useCounterStore();
</script>
<template>
<div>
<p>Count: {{ counterStore.count }}</p>
<button @click="counterStore.increate()">Increment</button>
</div>
</template>
<style scoped>
</style>
测试 结果:
getter方法的定义
//getter的定义
const doubeleCount = computed(() =>
count.value * 2
)
//将对象的方法使用return供组件使用
return {
count,
increate,
doubeleCount
}
<template>
<div>
<p>Count: {{ counterStore.count }}</p>
<p>DoubleCount:{{ counterStore.doubeleCount }}</p>
</div>
</template>
效果:
异步action
首先安装依赖 npm install axios
其次,在组件中导出调用异步的方法getList
// 导入一个方法 defineStore
import {defineStore} from 'pinia'
import { ref,computed } from 'vue'
import axios from 'axios'
const API_URL = 'https://jsonplaceholder.typicode.com/todos'
export const useCounterStore = defineStore('counter',()=>{
//定义异步action
const list = ref([])
const getlist = async () =>{
const res = await axios.get(API_URL)
list.value = res.data
console.log(list.value);
}
//将对象的方法使用return供组件使用
return {
getlist,
list
}
})
在组件中,引入并且调用方法即可
<template>
<div>
<p>Count: {{ counterStore.count }}</p>
<p>DoubleCount:{{ counterStore.doubeleCount }}</p>
<button @click="counterStore.increate()">Increment</button>
<button @click="counterStore.getlist()">getListData</button>
<hr>
<ol v-for="item in counterStore.list" :key="item.id">
<li >{{ item.title }}</li>
<li >{{ item.completed }}</li>
<li >{{ item.userId }}</li>
</ol>
</div>
</template>
效果:
初始界面:
点击getListData按钮后:
storeToRefs解构赋值
首先,引入相关依赖 storeToRefs,然后将响应式对象进行解构赋值
( 方法不需要使用storeToRefs解构赋值 切记!!!)
//针对响应式对象的解构赋值
const { count, doubeleCount, list } = storeToRefs(counterStore);
//对于方法的解构赋值(不需要使用storeToRefs)
const { increate,getlist } = counterStore;
此外,方法解构赋值,在调用方法时,括号加不加都行