Vue3 Pinia

一句话总结：Pinia是Vue3中官方推荐的状态管理库，它替代了Vuex，具有更简洁的语法、完美支持Vue3的Composition API和对TypeScript的完整支持等优势。

搭建Pinia环境

安装Pinia

npm i pinia

引入并使用pinia

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

使用pinia存储和读取数据

创建仓库并存储数据

import {defineStore} from 'pinia'
export const useSumStore = defineStore('sum', {
  state() {
    return {
      sum: 0
    }
  }
})

读取数据

引入创建的仓库

<script lang="ts" setup>
  import {ref} from 'vue'
  import {useSumStore} from '@/store/sum'
  const sumStore = useSumStore()
  console.log(sumStore.sum)
</script>

修改数据

直接修改

<script lang="ts" setup>
  import {useSumStore} from '@/store/sum'
  const sumStore = useSumStore()
  function add() {
    sumStore.sum++
  }
  function sub() {
    sumStore.sum--
  }
</script>

批量修改

使用创建出来的sumStore，并调用$patch批量修改数据

<script lang="ts" setup>
  import {useSumStore} from '@/store/sum'
  const sumStore = useSumStore()
  function add() {
    sumStore.$patch({
      sum: 888,
      name: 'lisi'
    })
  }
</script>

使用actions修改

export const useSumStore = defineStore('sum', {
  actions: {
    add(value) {
      this.sum += value
    }
  },
  state() {
    return {
      sum: 0,
      name: '张三'
    }
  }
}) 

调用actions中定义的方法, 可以传递数据

<script lang="ts" setup>
  import {useSumStore} from '@/store/sum'
  const sumStore = useSumStore()
  function add() {
    sumStore.add(4)
  }
</script>

storeToRefs

使用toRefs，会把store中所有的数据都变成响应式的， pinia提供了一个storeToRefs方法，只会关注数据，不会把方法进行响应式。

<script lang="ts" setup>
  import {storeToRefs} from 'pinia'
  import {useSumStore} from '@/store/sum'
  const sumStore = useSumStore()
  let { sum } = storeToRefs(sumStore)
  function add() {
    sumStore.add()
  }
</script>

getters

对store中的数据进行加工

export const useSumStore = defineStore('sum', {
  state() {
    return {
      sum: 0,
      name: '张三'
    }
  },
  getters: {
    bigSum(state) {
      return state.sum * 10
    }
  }
})

$subscribe

通过store的$subscribe()方法监听state变化

调用$subscribe()方法需要传递一个回调函数，$subscribe会传递两个参数：mutate(本次修改的信息，准确来说是事件对象)，state(数据)

store组合式写法

export const useSumStore = defineStore("sum", () => {
  let sum = ref(0);
  function add() {
    sum.value++;
  }
  return {
    sum,
    add,
  };
});