说白了,vue3中用pinia这个方法替代了vue2中的vuex
一、pinia初识
pinia其实就是把大仓库都变成了一个个小的,有点像vuex中的module
1.文件结构(搭建vue项目的时候启用pinia默认在stores文件夹下创建的文件,我们可以在这里创建我们的文件,)
第一种:
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
const doubleCount = computed(() => count.value * 2)
function increment() {
count.value++
}
return { count, doubleCount, increment }
})
第二种:
比较以下发现其实只是写法不一样,相当于还是里边有三部分:state(存放数据),getters(对数据进行操作后的数值),actions(修改数据的方法)
二、使用
通过import导入进来,然后再调用这个引入的函数赋值给一个常量,用这个常量获取我们定义的state以及方法等
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import {useCounterStore} from './stores/counter'
const Couter =useCounterStore();
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</header>
<h3>
计数器当前数值为{{Couter.count}}
<button @click="Couter.increment()">+1</button>
<button @click="Couter.reduce()">-1</button>
<button @click="Couter.addby(10)">+10</button>
</h3>
</template>
<style scoped>
header {
line-height: 1.5;
}
.logo {
display: block;
margin: 0 auto 2rem;
}
@media (min-width: 1024px) {
header {
display: flex;
place-items: center;
padding-right: calc(var(--section-gap) / 2);
}
.logo {
margin: 0 2rem 0 0;
}
header .wrapper {
display: flex;
place-items: flex-start;
flex-wrap: wrap;
}
}
</style>
三、注意事项
值得注意的是当我们取到用变量接取函数创建的小型仓库的时候,不能用解构赋值的方式接收其中的state和getting,会失去响应式,但是可以解构action中的函数,如果非要解构,就需要把取到的变量用storeToRefs();方法把他们转换为响应式的,但是action的函数不能通过这种方式进行解构,还是需要上一种方式进行解构;如下边代码的解构
const Couter =useCounterStore();
const {count,doubleCount}=storeToRefs(Couter);
const {increment}=Couter;