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
// 导入一个方法 defineStoreimport {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',()=>{//定义异步actionconst list = ref([])const getlist = async () =>{const res = await axios.get(API_URL)list.value = res.dataconsole.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;
此外,方法解构赋值,在调用方法时,括号加不加都行