vue3引入pinna

纵使相逢应不识!

已于 2023-05-10 16:55:44 修改

阅读量1.7k

点赞数 1

文章标签： vue.js typescript

于 2023-02-13 22:39:37 首次发布

本文链接：https://blog.csdn.net/qq_44737915/article/details/129017774

版权

文章详细介绍了在Vue3项目中如何引入和使用Pinia进行状态管理，包括创建store、定义state、getters、actions以及修改state的各种方法，如直接修改、$patch函数、action以及getter。同时提到了保持响应式的重要性和不同修改方式的适用场景。

摘要由CSDN通过智能技术生成

v3引入pinna
一：引入pinna

npm install pinia

二：src下面创建store文件夹和index.ts文件，在main.ts中引用pinna

import {createPinia} from 'pinia'
const store = createPinia()
createApp(App).use(router).use(store).mount('#app')

在index.ts中使用pinna，引入defineStore api,传入的第一个参数是唯一的，是该store的唯一标识，State 箭头函数返回一个对象在对象里面定义值
如果项目中有多个store，可以在store文件夹下创建type文件夹，里面用于存放state中的各种类型

import { defineStore } from 'pinia'
 
export const studyStore = defineStore("getNum", {
     state:()=>{
         return {
             num:1 as number
         }
     },
     //类似于computed 可以帮我们去修饰我们的值
     getters:{
 
     },
     //可以操作异步 和 同步提交state
     actions:{
 
     }
})

调用pinna中的值

<script setup lang="ts">
import { useUserStore } from '@/stores/user'
import { computed } from 'vue'
import { storeToRefs } from 'pinia'
// 方式1,计算属性方式
const userid = computed(() => useUserStore().userid)
// 方式2, 通过user.userid的方式使用
const user = useUserStore()
// 方式3, 使用toRef获取userid
const userid = toRef(useUserStore(), 'userid')
// 方式4, 借助pinia提供的api: storeToRefs 实现
const { userid } = storeToRefs(user)
</script>

三：修改state中的值，4种方法

1.直接修改，是没有问题的，

<template>
  <div>
    <span>data:{{ test.num }}</span>
    <button @click="add">数字++</button>
  </div>
</template>

<script setup lang="ts">
import { studyStore } from "../store"
const test = studyStore()

let add = () => {
  test.num++
}

</script>

<style scoped>

</style>

但是如果属性较多就需要一个一个修改，就要使用解构赋值


const Test = useTestStore()
 
const { current, name } = Test // 这样直接结构 会失去响应式
 
console.log(current, name);

这种会失去响应性，需要引入api,其原理跟toRefs 一样的给里面的数据包裹一层toref,让里面的每个数据都变成响应式，或者就要使用.value这种形式

import { storeToRefs } from 'pinia'
 
const Test = useTestStore()
 
const { current, name } = storeToRefs(Test) // 这里 结构前面包裹一个 storeToRefs() 跟 vue3一样

2.s使用$patch函数修改

test.$patch({
    num:211
  })

3.使用$patch函数传参修改

test.$patch((state) => {
    state.num++
  })

4.使用action，可以同步也可以异步,action和getter可以使用this直接指向state中的变量

//可以操作异步 和 同步提交state
  actions: {
    addNum() {// 这里不要用箭头函数 不然会影响 this 指向
      this.num++
    }
  }

let add = () => {
  //第一种：test.num++
  
  //2 test.$patch({
  //   num:211
  // })
  //3 test.$patch((state) => {
  //   state.num++
  // })
  test.addNum()
}

5.使用getter。getter 中同样可以使用 this ,但是 TS 无法推导类型，需要手动指定返回值类型

getters: {
    getNewNum():number{
      return this.num
    }
  },

或者

 getters: {
    // getNewNum():number{
    //   return this.num
    // }
    getNewNum:(state) => {
      return state.num
    }
  },

<template>
  <div>
    <span>data:{{ test.num }}</span>
    <span>newData:{{ test.getNewNum }}</span>
    <button @click="add">数字++</button>
  </div>
</template>

<script setup lang="ts">
import { studyStore } from "../store"
const test = studyStore()

let add = () => {
  //第一种：test.num++
  
  //2 test.$patch({
  //   num:211
  // })
  //3 test.$patch((state) => {
  //   state.num++
  // })
  test.addNum() 
}
</script>

<style scoped>

</style>