Vue状态管理工具Pinia的安装与使用教程

npm init vite

npm install pinia

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
// 创建pinia实例
const pinia = createPinia()
// 挂载到根实例上
createApp(App).use(pinia).mount('#app')

const store = useStore()
store.counter++

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++
    },
    randomizeCounter() {
      this.counter = Math.round(100 * Math.random())
    },
  },
})

// store/index.ts
import { defineStore } from "pinia"

// 1.定义并导出容器
// 参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到根容器，每个容器的名字就是这里的ID
export const useMainStore = defineStore('main', {
  /**
   * 类似与组件的data， 用来存储全局状态
   * 1.必须是函数：这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染（客户端其实无所谓）
   * 2.必须是箭头函数：为了更好的ts类型推导
   * 返回值：一个函数，调用该函数即可得到容器实例
   */
  state: () => {
    return {
      count: 100,
      foo: 'bar',
      arr: [1, 2, 3]
    }
  },
  /**
   * 类似于组件的computed，用来封装计算属性，有【缓存】功能
   */
  getters: {
    // 每个函数接受一个可选参数：state状态对象
    // count10(state) {
    //   console.log('count10()调用了');// 具有缓存功能
    //   return state.count + 10
    // }

    // （不建议）如果不使用state而使用this，此时就不能对返回值类型做自动推导了，必须手动指定
    count10(): number {
      return this.count + 10
    }
  },
  /**
   * 完全类比于Vue2组件中的methods（可以直接用this)，用来【封装业务逻辑】，修改state
   */
  actions: {
    /**
     * 注意！！不能使用箭头函数定义actions！！一定要用普通函数！！！
     * why？因为箭头函数绑定了外部this
     */
    changeState(num: number) {
      // 可以直接使用this，像极了Vue2
      // this.count++
      // this.foo = 'hello'
      // this.arr.push(4)

      // 对于批量修改，建议使用patch做优化
      this.$patch((state) => {
        state.count += num
        state.foo = 'hello'
        state.arr.push(4)
      })
    }
  }
})
// 2.容器中的state

// 3.修改state

// 4.actions的使用

<script setup lang="ts">
import HelloWorld from './components/HelloWorld.vue'
</script>

<template>
  <HelloWorld />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

<template>
  <p>{{ mainStore.count }}</p>
  <p>{{ mainStore.foo }}</p>
  <p>{{ mainStore.arr }}</p>
  <p>{{ mainStore.count10 }}</p>
  <p>{{ mainStore.count10 }}</p>
  <p>{{ mainStore.count10 }}</p>
  <hr />
  <p>{{ count }}</p>
  <p>{{ foo }}</p>
  <p>
    <button @click="handleChangeState">修改数据</button>
  </p>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { useMainStore } from '../store'

// 【哪里使用写哪里】，此时要在HelloWorld组件中用，那就写这里。这很Composition API
const mainStore = useMainStore() 

// 禁止！这样会丧失响应性，因为pinia在底层将state用reactive做了处理
// const { count, foo } = mainStore
// 解决方案：将结构出的数据做ref响应式代理
const { count, foo } = storeToRefs(mainStore)

const handleChangeState = () => {
  // ==============数据修改的几种方式=============
  // 方式一：直接修改
  // mainStore.count++

  // 方式二：使用 $patch(对象) 批量修改，建议使用，底层做了性能优化
  // mainStore.$patch({
  //   count: mainStore.count + 1,
  //   foo: 'hello',
  //   arr: [...mainStore.arr, 4] // 这就不优雅了，所以有了方式三
  // })

  // 方式三：使用 $patch(回调函数)，这个更优雅，墙裂推荐！！！
  // 回调函数中的state参数，就是Store定义时里面的state!
  // mainStore.$patch((state) => {
  //   state.count++
  //   state.foo = 'hello'
  //   state.arr.push(4)
  // })

  // 方式四：逻辑较为复杂时，应封装到Store的actions中，并对外暴露接口
  mainStore.changeState(10)
}
</script>