vue3中的pinia

说白了，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;

猜你喜欢