添加Pinia到项目
- 安装
yarn add pinia
# 或者使用 npm
npm install pinia
- main.js配置
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
//导入
import { createPinia } from 'pinia'
//得到实例
const pinia = createPinia()
//加入到app应用中
createApp(App).mount('#app').use(pinia)
pinia-counter基本使用
1 src下新建store/counter.js 代码如下
import { defineStore } from "pinia"; import { ref } from "vue"; export const useCounterStore = defineStore("counter", () => { //定义数据 const count = ref(0) //定义修改数据的方法(action 同步+异步) const increment = () => { count.value++ } return { count, increment } }) 2 app.vue代码如下
<script setup> import { useCounterStore } from './store/counter'; const counterStore = useCounterStore() </script> <template> <button @click="counterStore.increment">数据是{{ counterStore.count }}</button> </template> <style scoped></style>
pinia-getters和异步action
getters
Pinia中的getters直接使用computed函数进行模拟
1 counter.js代码如下
import { defineStore } from "pinia";
import { computed, ref } from "vue";
export const useCounterStore = defineStore("counter", () => {
//定义数据
const count = ref(0)
//定义修改数据的方法(action 同步+异步)
const increment = () => {
count.value++
}
//相对于上个用例的变化在这
//getter定义
const doubleCount = computed(() => count.value * 2)
return {
count,
increment,
doubleCount
}
})
2 app.vue代码如下
<script setup>
import { useCounterStore } from './store/counter';
const counterStore = useCounterStore()
</script>
<template>
<!-- 相对于上个用例变化在这 -->
<button @click="counterStore.increment">数据是{{ counterStore.count }}</button>
{{ counterStore.doubleCount }}
</template>
<style scoped></style>
异步action
1.counter.js
import { defineStore } from "pinia";
import { computed, ref } from "vue";
//此处执行时npm instal axois
import axios from "axios";
export const useCounterStore = defineStore("counter", () => {
const api_url = ""
//定义异步action
const list = ref([])
const getList = async () => {
//此处用什么请求取决于后端接口如何设计
const res = await axios.get(api_url)
}
return {
getList
}
})
2 app.vue
<script setup>
import { onMounted } from 'vue';
import { useCounterStore } from './store/counter';
const counterStore = useCounterStore()
onMounted(() => {
counterStore.getList()
})
</script>
<template></template>
<style scoped></style>
storeTorefs
直接解构赋值导致响应式丢失(见app.vue中的代码)
1.counter.js
import { defineStore } from "pinia";
import { computed, ref } from "vue";
export const useCounterStore = defineStore("counter", () => {
//定义数据
const count = ref(0)
//定义修改数据的方法(action 同步+异步)
const increment = () => {
count.value++
}
//getter定义
const doubleCount = computed(() => count.value * 2)
return {
count,
increment,
doubleCount
}
})
2.app.vue
<script setup>
import { useCounterStore } from './store/counter';
const counterStore = useCounterStore()
//这个地方直接解构赋值导致响应式丢失
const { count, doubleCount } = counterStore
</script>
<template>
<button @click="increment">数据是{{ count }}</button>
{{ doubleCount }}
</template>
<style scoped></style>
3.修改后的app.vue恢复了响应式
<script setup>
import { useCounterStore } from './store/counter';
import { storeToRefs } from 'pinia';
const counterStore = useCounterStore()
//变量用这种方法解构赋值有响应式特性
const { count, doubleCount } = storeToRefs(counterStore)
//方法
const { increment } = counterStore
</script>
<template>
<button @click="increment">数据是{{ count }}</button>
{{ doubleCount }}
</template>
<style scoped></style>
