/* store.js - 创建统一的pinia实例 */
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia

/* user.js user-Store */
import { defineStore } from 'pinia'
export const userStore = defineStore({
  id: 'counter',
  state: () => ({
    userId: 0
  }),
  getters: {
  },
  actions: {
  }
})

/* Vuerouter 中使用 */
import router from './router' //引入做好配置的router实例
import { useUserStore } from '@/stores/user'
import pinia from '@/stores/store' //引入pinia实例
//const userStore = useUserStore(pinia)

router.beforeEach((to, from, next) => {
  //在外面声明会导致在未装载pinia就完成了初始化 导致取值失败
  const userStore = useUserStore(pinia)
  const userId = userStore.$state.userId
})

//组件内使用
//main.js
import Vue from 'vue'
import { PiniaVuePlugin } from 'pinia' //vue2.7 需要引入该插件
import pinia from './stores/store' //引入实例
import App from './App.vue'
import router from './router'

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

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