是哪个大怨种选择在vue2项目中使用pinia替代vuex？是我！

最近重构项目，赶时髦选了ts（练手），又因为不能抛弃ie（9+），只能继续沿用vue2，于是产生了这个缝合怪项目…… 项目既然用到了ts，pinia自然少不了，但是网上的教程非常默契得选择vue3项目举例。 fine，踩坑之路从引入开始。

关于pinia的引入

main.ts

` ...

import VueCompostionApi from '@vue/composition-api'

Vue.use(VueCompostionApi) // 不引入pinia将报错

import {createPinia,PiniaVuePlugin} from 'pinia' // 根据pinia版本 版本1 使用PiniaPlugin 版本2 使用 PiniaVuePlugin

Vue.use(PiniaVuePlugin)

const pinia = createPinia()

...

new Vue({ ... pinia, ... }).$mount('#app')

`

关于pinia使用

store.ts

` import {defineStore } form 'pinia'

export const store = defineStore({

id:'xxx' // 必填

state:()=>{
    return {
        name:''
    }
},

getters:{}，  // 非必要转换别填

actions:{
    setName(){
        const _this = this as any // 不写下一行马上报错
        ...
        _this.$patch({
            name:'大怨种'
        })
        ...
    }
}

}) `

本来写得非常流畅，结果actions里函数中的this一直报错（Property '$patch' dose not exist on type {setName():Promise;}），搜遍了网上都没有找到原因。 最开始考虑用hooks中转actions中的方法，确实可以，但是这样做，比用vuex还复杂，pass。 然后灵机一动，这不就是一个ts报错么，直接用@ts-ignore忽略。OK，serve没问题，build的时候又报错(Do not use "@ts-ignore" because it alters compilation errors)，卒。

至于最后为什么改成上面那样，睡了一觉起来，突然福至心灵……

在组件中引入

这个没什么写的，用 mapState/mapActions 或 使用vue3的方式引入都可以。

尾声

以上是我在项目实践过程中遇到的问题，也许并不都是pinia的锅，毕竟确实缝合了很多其他奇怪的东西在里面（怪我怪我）。 so，如果你也遇到类似问题，可以参考本篇，有其他解法，欢迎讨论。