vue2使用pinia

描述

最近又要开始做新项目了，H5本来想用vue3，但是通过电商H5数据埋点统计了一下，发现使用ios9.x还是有一部分人，vue3会存在兼容性问题，为了保证所有用户都能正常使用，只能放弃vue3，继续使用vue2；

vue2目前的最新版本为v2.7.14，而且vue从v2.7开始，内置支持了组合式 API，所以基本上可以无障碍使用vue3的特性与语法；

vue2.7.x中使用pinia

项目的总体规划为：vite + vue2.7 + vueRouter3 + pinia，先把目前我正在使用的版本都发出来（目前时间2023-03-13）：

"vite": "^4.1.4"
"vue": "^2.7.14"
"vue-router": "3.5.4"
"pinia": "^2.0.33"

//项目根目录/src/store/store.js（pinia实例）

import { createPinia } from 'pinia';

const pinia = createPinia();
export default pinia;

//抽离出来的user.js，用于存放用户相关的信息

import { defineStore } from 'pinia'
export const userStore = defineStore({
  id: 'counter',
  state: () => ({
    userId: 0
  }),
  actions: {
  }
})

//关键部分，main.js中使用，vue2和vue3的写法不同

import Vue from 'vue'
import { PiniaVuePlugin } from 'pinia' //vue2.7 需要引入该插件
import pinia from '@/store/store.js' //引入实例
import App from '@/App.vue'

Vue.use(PiniaVuePlugin) //安装插件

new Vue({
  router,
  pinia, //注意如果直接使用pinia:createPinia(),那么在其他地方使用的pinia的实例就不相同了，所以直接使用pinia
  render: (h) => h(App),
}).$mount('#app')

//某个vue组件内要使用pinia

import { useUserStore } from '@/stores/user.js'
const userStore = useUserStore() //不需要引入pinia实例，因为在初始化vue的时候已经加载了，直接使用对应store

//具体使用的地方，直接调用 userStore.xxx 即可
//如调用 userStore.userId，输出 0

注意

//非vue组件内要使用pinia，如router.js中使用，必须注意以下事项

import router from '@/router' //引入做好配置的router实例
import { useUserStore } from '@/stores/user.js'
import pinia from '@/store/store.js' //引入pinia实例

router.beforeEach((to, from, next) => {
  //在外面声明会导致在未装载pinia就完成了初始化，导致取值失败，所以必须在方法内部再初始化使用！！！
  const userStore = useUserStore(pinia)
  const userId = userStore.userId
})

总结

vue2中使用pinia和vue3中的写法有区别，而且pinia的官方文档并没有具体写在vue2.7中怎么使用，所以按照本文的详细步骤来写就不会出错。