Pinia，vueX团队的另一作品

什么是Pinia

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

vueX的问题

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

pinia特点

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

使用pinia

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

1. 安装pinia

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

2. 入口文件挂载pinia

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

1. 在src/stores文件夹里声明store
2. 在组件中引入并使用

声明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)  })

组合式API

个人推荐，我喜欢组合式，就看你vue3是喜欢用选项式还是组合式了

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.tokenstore.doubleCountsstore.doubleCountPlusParams(2)// 解构后的值是一个ref，响应式的const {  token,  doubleCounts,  doubleCountPlusParams} = storeToRefs(useXXXStore())

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