我把vue3项目中的vuex去除了，改用pinia

　　Pinia
　　pinia目前已经是vue官方正式的状态库。适用于vue2和vue3，本文只描述vue3的写法。
　　pinia的优势
　　相对于以前的vuex，pinia具有以下优势更简单的写法，代码更清晰简洁，支持compositionapi和optionsapi语法更完善的typescript支持，无需创建自定义复杂的包装类型来支持TypeScript，所有内容都是类型化的，并且API的设计方式尽可能利用TS类型推断非常轻量，只有1kb的大小不需要再注入魔法字符串等进行调用安装yarnaddpiniaornpminstallpinia定义、使用store
　　创建一个pinia并传递给vue应用import｛createPinia｝frompiniaimport｛createApp｝fromvueimportAppfrom。app。vuecreateApp（App）。use（createPinia（））。mount（app）定义store
　　store的定义是通过defineStore这个函数，
　　它需要一个唯一的名称，该名称可以作为第一个参数传递，也可以用id熟悉传递。import｛defineStore｝frompiniaexportconstuseMainStoredefineStore（main，｛otheroptions。。。｝）import｛defineStore｝frompiniaexportconstuseMainStoredefineStore（｛id：mainotheroptions。。。｝）
　　该id是必要的，主要是用于vuedevtools使用storeimport｛useMainStore｝fromstoresmainexportdefaultdefineComponent（｛setup（）｛conststoreuseMainStore（）return｛store，｝｝，｝）
　　上述代码中，useMainStore实例化后的，我们就可以在store上访问state、getters、actions等（pinia中没有mutations）。
　　该store是一个reactive对象，所以不需要。value，也不能对其进行解构使用，否则失去响应性（类似props）。
　　storeToRefs
　　如果一定要对其进行解构使用，可以使用storeToRefs，类似vue3中的toRefsimport｛storeToRefs｝frompiniaexportdefaultdefineComponent（｛setup（）｛conststoreuseMainStore（）const｛user，company｝storeToRefs（store）return｛user，company｝｝，｝）state定义state
　　在pinia中，定义state是在函数中返回state初始状态import｛defineStore｝frompiniaconstuseMainStoredefineStore（main，｛state：（）（｛teacherName：艾伦，userList：〔｛name：小明，age：18｝，｛name：小李，age：15｝，｛name：小白，age：16｝，〕，｝），｝）exportdefaultuseMainStore访问state
　　可以通过store实例直接访问importuseMainStorefromstoremainexportdefaultdefineComponent（｛setup（）｛constmainStoreuseMainStore（）constteacherNamecomputed（（）mainStore。teacherName）constuserListcomputed（（）mainStore。userList）return｛teacherName，userList，｝｝，｝）
　　也可以直接修改状态importuseMainStorefromstoremainexportdefaultdefineComponent（｛setup（）｛constmainStoreuseMainStore（）functionchange（）｛mainStore。teacherName米利mainStore。userList。push（｛name：小琪，age：19｝）｝return｛change｝｝，｝）
　　虽然可以直接修改，但是出于代码结构来说，全局的状态管理还是不要直接在各个组件处随意修改状态，应放于action中统一方法修改（没有mutation了）重置状态
　　可以通过调用store上的方法将状态重置为初始状态constmainStoreuseMainStore（）mainStore。reset（）patch
　　修改state还可以通过使用patch方法
　　patch可以同时修改多个值，举个例子importuseMainStorefromstoremainexportdefaultdefineComponent（｛setup（）｛constmainStoreuseMainStore（）mainStore。patch（｛teacherName：德普，userList：〔｛name：小明，age：18｝，｛name：小李，age：15｝，〕｝）return｛｝｝，｝）
　　但是，这种写法的在修改数组时，例如我只想要把userList的中第一项小明的age改为20，也需要传入整个包括所有成员的数组，这无疑增加了书写成本和风险，于是一般都推荐使用以下的传入一个函数的写法mainStore。patch（（state）｛state。teacherName德普state。userList〔0〕。age20｝）监听订阅state
　　通过store。subscribe（）的方法，
　　该方法的第一个参数接受一个回调函数，该函数可以在state变化时触发constsubscribemainStore。subscribe（（mutation，state）｛console。log（mutation）console。log（state）｝）
　　如上所示，该回调函数的两个参数
　　其中state是mainStore实例，而mutation打印如下
　　可以发现，打印结果的mutation对象主要包含三个属性events：是这次state改变的具体数据，包括改变前的值和改变后的值等等数据storeId：是当前store的idtype：type表示这次变化是通过什么产生的，主要有三个分别是direct：通过action变化的patchobject：通过patch传递对象的方式改变的patchfunction：通过patch传递函数的方式改变的
　　停止监听
　　上面代码中，调用mainStore。subscribe返回的值（即上方示例的subscribe变量）可以停止订阅subscribe（）
　　store。subscribe（）的方法的第二个参数options对象，是各种配置参数，包括
　　detached属性，其值是一个布尔值，默认是false，正常情况下，当订阅所在的组件被卸载时，订阅将被停止删除，如果设置detached值为true时，即使所在组件被卸载，订阅依然可以生效。
　　其他属性主要还有immediate、deep、flush等等，和vue3watch的对应参数效果一样。getter定义getter
　　getter是store中的state计算值，以defineStore中的getters属性定义
　　getters属性的值是一个函数，该函数的第一个参数是stateconstuseMainStoredefineStore（main，｛state：（）（｛user：｛name：小明，age：7，｝，｝），getters：｛userInfo：（state）｛state。user。name｝今年｛state。user。age｝岁了，这里想要正确推断参数state的类型，则定义state时需要使用箭头函数定义｝，｝）
　　上面代码中，getters的值是箭头函数，当getters的值是普通函数时，可以通过this访问整个store实例（如下）
　　但是如果是普通函数，想要通过this获取state的值并希望this的类型能正确推断，同时希望函数的返回值类型正确推断，我们需要声明函数的返回类型。getters：｛userDesc：（state）｛state。user。name｝今年｛state。user。age｝岁了，userBesidesDesc（）：string｛需注明类型return｛this。user。age｝岁的｛this。user。name｝可以使用this获取值｝，returnUserInfo（）｛returnthis。userDesc也可以使用this获取其他getters｝，｝，访问getterimportuseMainStorefromstoremainexportdefaultdefineComponent（｛setup（）｛constmainStoreuseMainStore（）constuserDesccomputed（（）mainStore。userDesc）constuserBesidesDesccomputed（（）mainStore。userBesidesDesc）constreturnUserInfocomputed（（）mainStore。returnUserInfo）return｛userDesc，userBesidesDesc，returnUserInfo，｝｝，｝）action定义action
　　action是store中的方法，支持同步或异步。
　　action定义的函数可以是普通函数从而可以通过this访问整个store实例，同时该函数可以传入任意参数并返回任何数据constuseMainStoredefineStore（main，｛state：（）（｛count：0，｝），actions：｛add（）｛this。count｝，addCountNum（num：number）｛this。countnum｝，｝，｝）调用actionsetup（）｛constmainStoreuseMainStore（）functionmainAction（）｛mainStore。addCount（）｝functionaddCountTwo（）｛mainStore。addCountNum（2）｝return｛mainAction，addCountTwo｝｝，监听订阅action
　　通过store。onAction（），可以监听action的动作及结果等
　　该函数可以接收一个回调函数作为参数，回调函数的参数中有五个属性，具体如下constunsubscribemainStore。onAction（（｛name，action函数的名称store，store实例，这里是mainStoreargs，action函数参数数组after，钩子函数，在action函数执行完成返回或者resolves后执行onError，钩子函数，在action函数报错或者rejects后执行｝）｛｝）
　　举个例子，
　　首先，定义一个storeimport｛defineStore｝frompiniaconstuseMainStoredefineStore（main，｛state：（）（｛user：｛name：小明，age：7，｝，｝），actions：｛subscribeAction（name：string，age：number，manualError？：boolean）｛returnnewPromise（（resolve，reject）｛console。log（subscribeAction函数执行）if（manualError）｛reject（手动报错）｝else｛this。user。namenamethis。user。ageageresolve（｛this。user。name｝今年｛this。user。age｝岁了）｝｝）｝，｝，｝）exportdefaultuseMainStore
　　然后在setup中使用importuseMainStorefromstoremainimport｛ref，defineComponent，computed｝fromvueexportdefaultdefineComponent（｛setup（）｛constmainStoreuseMainStore（）functionsubscribeNormal（）｛mainStore。subscribeAction（小李，18，false）｝functionsubscribeError（）｛mainStore。subscribeAction（小白，17，true）｝constunsubscribemainStore。onAction（（｛name，action函数的名称store，store实例，这里是mainStoreargs，action函数参数数组after，钩子函数，在action函数执行完成返回或者resolves后执行onError，钩子函数，在action函数报错或者rejects后执行｝）｛console。log（action的函数名，name）console。log（参数数组，args）console。log（store实例，store）after（（result）｛console。log（onActionafter函数，result）｝）onError（error｛console。log（错误捕获，error）｝）｝）return｛subscribeNormal，subscribeError，｝｝，｝）
　　如上，在setup中，调用了subscribeNormal函数后，页面打印如下
　　调用了subscribeError函数后，页面打印如下
　　同样，可以通过调用mainStore。onAction返回的值来手动停止订阅，在上面代码的例子中，即是unsubscribe（）手动停止订阅
　　store。onAction默认在所在组件卸载时会被自动删除，可以通过传递第二个参数true，来将action订阅和所在组件分开（即组件卸载时，订阅依然有效）mainStore。onAction（callback，true）store使用位置
　　在组件中使用时，useStore（）在大多数情况下都可以在调用后开箱即用。
　　在其他地方使用时，需确保在pinia激活使用后（app。use（createPinia（）））才能使用useStore（）
　　例如在路由守卫中import｛createRouter｝fromvuerouterimportuseMainStorefromstoremainconstroutercreateRouter（｛。。。｝）报错constmainStoreuseMainStore（）router。beforeEach（（to）｛正常使用constmainStoreuseMainStore（）｝）
　　在store中也可以访问其他storeimport｛defineStore｝frompiniaimport｛useUserStore｝from。userexportconstuseMainStoredefineStore（main，｛getters：｛otherGetter（state）｛constuserStoreuseUserStore（）returnuserStore。datastate。data｝，｝，actions：｛asyncfetchUserInfo（）｛constuserStoreuseUserStore（）if（userStore。userInfo）｛。。。｝｝，｝，｝）pinia插件
　　piniastore支持扩展，通过pinia插件我们可以实现以下给store添加新属性给store添加新选项给store添加新方法包装已存在的方法修改甚至删除actions。。。
　　例如可以写一个简单的插件来给所有store添加一个静态属性import｛createPinia｝frompiniaconstpiniacreatePinia（）传递一个返回函数pinia。use（（）（｛env：dev｝））app。use（pinia）
　　然后，在所有其他的store都可以访问到上面添加的env属性setup（）｛constmainStoreuseMainStore（）console。log（mainStore。env）dev｝插件函数
　　从上方代码可以发现，pinia插件是一个函数，这个函数有一个可选参数import｛PiniaPluginContext｝frompiniafunctionmyPiniaPlugin（context：PiniaPluginContext）｛console。log（context）｝
　　context打印出来主要有app：当前应用Vue。createApp（）创建的appoptions：defineStore配置的数据pinia：当前通过createPinia（）创建的pinia实例store：当前store实例
　　通过context我们可以在store上设置属性pinia。use（（｛store｝）｛store。envdev｝）
　　这样，在所有其他的store都可以访问到上面添加的env属性
　　pinia的store是通过reactive包装的，可以自动解包它包含的任何ref对象pinia。use（（｛store｝）｛store。envref（dev）｝）
　　通过上面插件，访问store的env时不需要。value，就可以直接访问setup（）｛constmainStoreuseMainStore（）console。log（mainStore。env）不需要加。value｝添加外部属性
　　当需要添加来自其他库或不需要响应式的数据时，应该用markRaw（）包装传递的对象，例如
　　markRaw来自vue3，可以标记一个对象，使其永远不会转换为proxy。返回对象本身。import｛markRaw｝fromvueimport｛router｝from。routerimport｛axios｝fromaxiospinia。use（（｛store｝）｛store。routermarkRaw（router）store。axiosmarkRaw（axios）｝）在插件内部使用subscribe、onActionpinia。use（（｛store｝）｛store。subscribe（（）｛reacttostorechanges｝）store。onAction（（）｛reacttostoreactions｝）｝）新属性的typescript支持
　　当通过插件添加新属性时，可以扩展PiniaCustomProperties接口
　　可以用设置get，set或者简单声明值的类型，以此来安全地写入和读取新加的属性importpiniadeclaremodulepinia｛exportinterfacePiniaCustomProperties｛setenv（value：stringRefstring）getenv（）：string或者env：string｝｝