羽森 / Orin

什么是Pinia

其目的是设计一个拥有组合式 API 的 Vue 状态管理库。目标用户是使用vue3的用户，但并不强制用户使用compositionAPI写法。值得一提的是，pinia的开发团队是vueX的核心开发团队，采用的是vueX5版本的设计理念，如果没有以下的问题，使用vueX也无妨

vueX的问题

改变值的话需要分清是同步还是异步
vueX对ts对支持不友好，pinia原生支持
vueX的state多的时候，需要分成module来使用，pinia是不用的

pinia特点

完整的ts支持
及其轻巧（约1kb）
Store中的Actions配置项既可以执行同步或异步方法
模块不需要嵌套，可以声明多个Store
支持Vue Dev Tools、SSR和webpack代码拆分

使用pinia

如果使用的是vue2写法，步骤和使用vueX一样，但有些许小差别

第一步，安装pinia

  # 获取最新版的pinia
  npm install pinia@next

第二步，入口处挂载Pinia

// 和vueX不同的是我们引入的是pinia中的createPinia方法
// 再用该方法进行use()挂载
import { createPinia } from 'pinia'
app.use(createPinia())

第三步，在src/stores文件夹里声明store

最后，在组件中引入并使用

声明store

选项式API

  import {defineStore} from 'pinia'
  export const useXXXStore = defineStore('stored', 
    // ------------state-----------
    // 标准写法
    state: () => (
      return {
        token:'xxxxx'
      }
    )
    // 简化写法
    state: ()=>({
      token:"xxxxxxxxx";
    })

    // ------------getters-----------

    getters:{
      doubleCounts(state){
        return state.count * 2;
      },
      // 通过this来访问自己store中的其他getters
      doubleCountsPlus(){
        return this.doubleCounts + 1;
      },
      // getter 传递参数
      doubleCountPlusParams(){
        return plusNum => this.doubleCounts + plusNum
      }
      /**
       * 访问其他store中的getters
       * 跟vue中使用store一样，先在store中吧另外一个store
       * 用import导入来成变量或者结构，然后再调用即可
       * */ 
    }

    // ------------actions-----------

    /**
     * vueX中使用同步数据时用mutation，异步时则用Actions，
     * 在pinia中异步或同步都只用Actions
     * 
     * */ 
   
    actions:{
      // 1. 同步
      addCount(){
        this.count ++;
      }
      // 传参
      addCount(num){
          this.count += num;
      }
      // 2. 异步（模拟
      setTimeout(()=>{
        this.count += num;
      },3000)
    }
  )

description

这两者不是竞争关系（自家人还竞争什么），是使用的场景不同，pinia轻量级，体积小，适合对小型应用，项目大的话还是vueX好，pinia也已经被官方接管了，只是目前 vueX 和 Pinia 还是两个独立的仓库，以后可能会合并，也可能独立发展，只是官方肯定推荐的是 Pinia，不过别担心，既然符合了vueX5 提案所提到的功能点，那学完pinia，到时候vueX5出来的时候也可以直接上手。

组合式API

个人喜欢的写法

import { ref, } from 'vue'

export const useCounterStore = defineStore('counter', () => {
  /**
   * ref() 就是 state 属性
   * computed() 就是 getters
   * function() 就是 actions
   */
  const count = ref(0)
  const increment = () => count.value++
  const doubleValue = computed(() => count.value * 2),

  return {
    count,
    increment,
    doubleValue
  }
})

使用store

// 方法一 不是响应式
import { storeToRefs } from 'pinia'
import { useXXXStore } from './store/main.js'
/**
   * 当使用组合式API编写pinia时，ref包裹
   * 再使用上面👆的方式获取，其值就是响应式了
   * */

// 方法二 setup语法糖解构storeToRefs();
import { useXXXStore } from './store/main.js'
const store = useXXXStore()
store.token
store.doubleCounts
store.doubleCountPlusParams(2)
// 解构后的值是一个ref，响应式的
const {
  token,
  doubleCounts,
  doubleCountPlusParams
} = storeToRefs(useXXXStore())

到这基本使用就没问题了，今天浅尝了一下pinia，更多请查看官方文档

Pinia，vueX团队的另一作品2022-05-01