pinia使用

安装pinia

npm install pinia

// 或者
yarn add pinia

• 在项目中使用，先main.ts引用进来

import { createPinia } from 'pinia'

const pinia = createPinia()

app.use(pinia) // 即可，省略了部分代码

• Sotre文件夹中书写index.ts

import { defineStore } from 'pinia'
// 定义一个设置命名空间的文件
import { Names } from './store-name'
/**
 * defineStore 有两个参数
 * 第一个参数：命名空间
 * 第二个参数：对值的操作，有state，getter，actions方法
 */
// 命名规则：hook都是以use开头
export const useTestStore = defineStore(Names.TEST,{
    state:()=>{
        return {
            current: 1,
            name: 'yx'
        }
    },
    // 类似于computed 修饰一些值
    getters:{

    },
    // methods：同步，异步方法都可以做，修改state
    actions:{

    }
})

• store-name.js 枚举文件

export const enum Names {
    TEST = 'TEST'
}

• App.vue 中使用

<template>
  <div>
    pinia:{{test.name}}
  </div>
</template>

<script setup lang="ts">

import { useTestStore } from './stores'

const test = useTestStore()

</script>

• 修改state的五种方法

1. 通过事件方法直接修改test里面的属性

<template>
  <div>
    pinia:{{test.name}}
  </div>
  <button @click="changeTest"> change</button>
</template>

<script setup lang="ts">

import { useTestStore } from './stores'

const test = useTestStore()
// 通过事件，直接修改test里面的之
const changeTest = ()=>{
  test.name = '我被改变了'
}

</script>

<style lang="scss" scoped>
</style>

2. 通过pinia提供的$patch方法，可批量修改属性

const changeTest = ()=>{
  test.$patch({
    current: 44444,
    name:'hello'
  })
}

3. 还是通过$patch，只不过里面传递的是函数写法

const changeTest = ()=>{
  // state 是 store里面定义的变量
  test.$patch((state)=>{
   // 在函数里面可以定义一些逻辑
   state.name = '你你你'
  })
}

4. 使用$state 方法，但要修改state里面所有的值才行，不建议使用

const changeTest = ()=>{
  test.$state = {
    name: 'hao de',
    current: 222
  }
}

5. 通过 actions 里面的方法，进行修改state

// methods：同步，异步方法都可以做，修改state
    actions:{
        // 因为需要使用this，所以这里不能用箭头函数，否则会改变this指向
        setCurrent (num:number = 999){
            this.current = num
        }
    }

// app.vue  里直接调用此方法即可

import { useTestStore } from './stores'

const test = useTestStore()

const changeTest = ()=>{
  test.setCurrent(888)
}

• 获取的test值是可以进行结构的，但不具备响应式，因此使用storeRefs方法让其具备响应式

import { useTestStore } from './stores'

import { storeToRefs } from 'pinia'

const test = useTestStore()
// 结构 test 值，并让其具有响应式
const {current,name} = storeToRefs(test)

const changeTest = ()=>{
  current.value++
  name.value = '我被改变了'
}