pinia--vue3中的状态管理

一、Pinia是什么？

Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态。实际上，pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex。

二、为什么要使用pinia？

pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。

pinia中action支持同步和异步，Vuex不支持

良好的Typescript支持，毕竟我们Vue3都推荐使用TS来编写，这个时候使用pinia就非常合适了

无需再创建各个模块嵌套了，Vuex中如果数据过多，我们通常分模块来进行管理，稍显麻烦，而pinia中每个store都是独立的，互相不影响。

体积非常小，只有1KB左右。

pinia支持插件来扩展自身功能。

支持服务端渲染。

三、Pinia 基础特性

1、State

（1）默认情况下，通过 store 实例访问 state，可以直接读取和写入，如 @click="store.count++"

（2）通过 store.$reset() 方法可以将 state 重置为初始值。

（3）除了直接通过 store 修改 state，还可以通过 store.$patch() 方法提交多个更改。

（4）可以通过 store.$subscribe() 订阅 State 的变化，在 patches 修改之后订阅只会触发一次。默认情况下，订阅绑定到添加它的

组件，当组件卸载时，它们将自动删除，也可以配置将其保留。

2、Getters

（1）Getters 属性的值是一个函数，接受 state 作为第一个参数，目的是鼓励使用箭头函数

（2）非箭头函数会绑定 this，建议仅在需要获取整个 store 实例的场景使用，且需要显式定义函数返回类型

3、Actions

（1）与 Gettes 一样可以通过 this 访问整个 store 实例

（2）Actions 可以是异步的或同步的，不管怎样，都会返回一个 Promise

（3）Actions 可以自由的设置参数和返回的内容，一切将自动推断，不需要定义 TS 类型

（4）与 State 一样，可以通过 store.$onAction() 订阅 Actions，回调将在执行前触发，并可以通过参数 after() 和 onError() 允许在Action 决议后和拒绝后执行函数。同样的，订阅绑定的是当前组件。

四、Pinia 中关于 TypeScript 类型推断。

Pinia 默认提供良好的 TypeScript 支持，但是要想获得完整的类型推断，需要遵循一些使用建议：

1、声明 state 建议使用箭头函数，会自动推断属性的类型。如果使用非箭头函数，在 getters 中使用形参 state 访问属性TypeScript 无法识别

const useStore = defineStore('main', {
  // 使用非箭头函数定义
  state() {
    return {
      count: 0
    }
  },
  getters: {
    // 使用 state 访问状态
    doubleCount(state) { 
      return state.count * 2
    }
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

2、声明 Getters 属性建议使用 state 参数访问状态（箭头函数或非箭头函数），非箭头函数虽然可以使用 this ，但不会自动推断类型（当没有声明 state 形参，或 state 使用非箭头函数定义时）

为了避免使用 this，官方建议使用箭头函数

建议仅当需要获取整个 store 时使用 this，但必须显式的定义函数返回类型，TypeScript 不会自动推断

建议使用 this 的时候不要声明 state 形参

const useStore = defineStore('main', {
  state: () => ({
    count: 0
  }),
  getters: {
    doubleCount() {
      return this.count * 2
    },
    // 解决办法1
    doubleCount2(state) {
      return this.count * 2
    },
    // 解决办法2
    doubleCount3():number {
      return this.count * 2
    }
  },
  actions: {
    increment() {
      this.count++
    }
  }
})

五、Pinia的函数

1、createPinia(): Pinia。

        创建一个被应用所使用的 Pinia 实例。返回：Pinia

2、defineStore(id, options): StoreDefinition。

        创建一个检索 store 实例的 useStore 函数。

参数

名称	类型	描述
useStore	StoreDefinition	要映射的存储
keyMapper	KeyMapper	为actions定义新名称的对象

 例如：

export default {
  methods: {
    // 其他方法属性
    // useCounterStore 有两个操作（action），分别叫做 `increment` 和 `setCount`
    ...mapActions(useCounterStore, { moar: 'increment', setIt: 'setCount' })
  },
 
  created() {
    this.moar()
    this.setIt(2)
  }
}

3、mapState(useStore, keyMapper): _MapStateObjectReturn。

        通过生成要在组件的 computed 字段中展开的对象，以允许从一个没有使用组合式 API (setup()) 的 store 使用 state 和 getters 对象的值是状态 properties/getters ，而键是结果计算属性的名称。您也可以传递一个自定义函数，该函数将接收 store 作为其第一个参数。请注意，虽然它可以通过这个访问组件实例，但它不会识别类型。

参数

名称	类型	描述
useStore	StoreDefinition	要映射的存储
keyMapper	KeyMapper	状态（state）属性或访问器（getter）的对象

例如：

export default {
  computed: {
    // 其它计算属性
    // useCounterStore 有一个 state 属性叫做 `count` 和一个 getter 叫做 `double`
    ...mapState(useCounterStore, {
      n: 'count',
      triple: store => store.n * 3,
      // 注意如果我们想使用 `this` 则不能使用箭头函数
      custom(store) {
        return this.someComponentValue + store.n
      },
      doubleN: 'double'
    })
  },
 
  created() {
    this.n // 2
    this.doubleN // 4
  }
}

4、mapStores(…stores): _Spread。

        通过生成要在组件的 computed 字段中展开的对象，允许使用没有组合式API (setup())的存储。它接受 store 定义的列表。

参数

Name	Type	描述
...stores	[…Stores[]]	要映射到对象的存储（store）列表

例如：

export default {
 computed: {
   // 其它计算属性
   ...mapStores(useUserStore, useCartStore)
 },
 
 created() {
   this.userStore // id为"user"的存储
   this.cartStore // id为"cart"的存储
 }
}

 5、 storeToRefs(store): ToRefs。

        用 store 的所有state、getters和 插件添加的（plugin-added）state、 属性（properties）创建一个引用对象。类似于toRefs()，但专门为 Pinia store 设计

参数:

名称	类型	描述
store	SS	用以提取refs的 store