一文带你搞懂Vue3中Pinia的使用

npm install pinia
# or
yarn add pinia

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from "pinia";
const app = createApp(App)

app.use(createPinia())

app.mount('#app')

import { defineStore } from 'pinia'

export const useUserStore = defineStore('user', {
  state: () => ({ user: {
      name: '张三'
  } }),
  getters: {
    userName: (state) => state.user.name,
  },
  actions: {
    setName(name) {
      this.user.name = name
    },
  },
})

export const useUserStore = defineStore('user', () => {
  const user = ref({
      name: '张三'
  })
  
  const userName = computed(() => {
      return user.value.name
  })
  function setName(name) {
      user.value.name = name
  }
  
    return { user, userName, setName }
})

<template>
 <div>
	<div>用户名: {{userName}}</div>
     
	<button @click="handleClick">设置用户名</button>
 </div>
</template>

<script lang="ts" setup>

import {useUserStore} from "../stores";
import {storeToRefs} from "pinia";

const store = useUserStore()
// 将store中的state或者getter转为响应式变量
const {userName} = storeToRefs(store)
// 将store中的action解构出来
const {setName} = store

const handleClick = () => {
	increment('李四')
}
</script>
<style scoped lang="scss">
</style>

import { defineStore } from 'pinia'

​​​​​​​interface User {
  name: string
  sex: number
}
const useUserStore = defineStore('user', {
  // 如果使用的是ts，使用箭头函数可以自动推理出state返回状态的类型
  state: () => {
    return {
      isTest: false
      count: 1,
      userList: [] as User[],
    }
  },
})

const store = useUserStore()

​​​​​​​store.count++

store.$reset()

store.$patch({
  count: store.count + 1,
  isTest: true,
})
// 传入一个函数
store.$patch((state) => {
  state.count = state.count + 1,
  state.isTest = true
})

store.$subscribe((mutation, state) => {
 console.log(mutation);
 console.log(state);
})

import { defineStore } from 'pinia'
export const useUserStore = defineStore('user', {
  state: () => ({ user: {
      name: '张三'
  } }),
  getters: {
    userName: (state) => state.user.name,
  },
})

export const useUserStore = defineStore('user', () => {
  const user = ref({
      name: '张三'
  })
  // 相当于getter中定义userName
  const userName = computed(() => {
      return user.value.name
  })
  return { user, userName }
})

getters: {
    userName: (state) => {
        return (before) => before + state.user.name
    },
}

<script>
export default {
  setup() {
    const store = useUserStore()
    return { getUserName: store.userName }
  },
}
</script>

<template>
  <p>{{ getUserName('Hi,') }}</p>
</template>

import { defineStore } from 'pinia'

​​​​​​​export const useUserStore = defineStore('user', {
  state: () => ({ user: {
      name: '张三'
  } }),
  actions: {
    setName(name) {
      this.user.name = name
    },
  },
})

export default {
  setup() {
    const store = useUserStore()
    store.setName('李四')
    return { }
  },
}

const store = useUserStore()
store.$onAction(({name, store, args, after, onError})=>{
    console.log(`${name} 函数准备开始执行`)
    console.log(`${name} 函数的参数为：${args}`)
    after(() => {
        console.log(`${name} 函数执行完成`)
    })
})

// 手动删除监听器
unsubscribe()