Vue2中Pinia安装及问题的处理

前言

在版本迭代优化中，项目中大量使用VUEX,正好想使用一下新的Pinia，因为某些原因不能对现有的框架进行升级，所以还是延续vue2。 Vue版本：2.6.14

开始pinia的迁移之路

首先需要将项目中原有的vuex进行卸载，卸载命令如下

js 复制代码

npm uninstall vuex

2.安装Pinia

js 复制代码

    npm install pinia

在你的代码中引入 Pinia，并创建一个 Pinia 实例：

import { createPinia } from 'pinia'; const pinia = createPinia();

因为Pinia目的是设计一个拥有组合式 API 的 Vue 状态管理库。所以咱们还需要安装组合式 API 包：@vue/composition-api

安装@vue/composition-api

js 复制代码

npm install @vue/composition-api

到现在安装命令结束。接下来就是注册因为我的Store只有一个出口文件就是Store/index.js

store/index.js 复制代码

import Vue from 'vue'
import { createPinia,PiniaVuePlugin } from 'pinia'
const pinia = createPinia();
Vue.use(PiniaVuePlugin)
export default pinia;
export  * from './modules/app'

再注册composition-api，同时也将pinia也引入main.js中

main.js 复制代码

import store from './store'
import VueCompositionAPI from '@vue/composition-api';
Vue.use(VueCompositionAPI);
new Vue({
  el: '#app',
  ....
  store,
  render: h => h(App)
}).$mount('#app')

此时咱们就可以按照Pinia官方提供的API进行对原有VUEX的写法进行改造了。

原有的VUE示例：

js 复制代码

const app = {
  state: {
    istask:  false,
  },
  mutations: {
    SET_TASK(state) {
      state.istask= !state.istask;
    },
    
  },
  actions: {
    settask({ commit }) {
      commit('SET_TASK')
    },
   
  }
}
export default {
  namespaced: true,
  ...app
};

Pinia：

import 复制代码

const userAppStore = defineStore('app', {
    state: () => {
        return {
            istask: false
        }
    },
    actions: {
        SET_TASK(state) {
            this.istask = !this.istask;
        },
    }
})
export userAppStore

.vue中的使用

css 复制代码

import { userAppStore } from '@/store/index' 
import { mapState, mapActions } from 'pinia'; pinia的两个方法

computed: {
        ...mapState(userAppStore, ['istask']),
    },
    methods: {
        ...mapActions(userAppStore, ['SET_TASK']),
        }

以上就是pinia的使用，pinia详细的文档教程还需要上官方去看 Pinia 使用中遇见了两个问题 1.

解决方案如下：在vue.config.js中配置webpack

js 复制代码

chainWebpack(config) {
			config.module
			.rule('mjs')
			.test(/\.mjs$/)
			.include.add(/node_modules/).end()
			.type('javascript/auto');
	},

2.在VueRouter中使用Pinia 报错信息如下： Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia) This will fail in production.

原因：VueRouter的执行比Pinia早

Pinia 官方文档已经给出解决方案：在组件外使用 store | Pinia (vuejs.org) 解决方法：

单独写一个pinia文件：

import { createPinia } from "pinia"; const pinia = createPinia(); export default pinia;

router.js

javascript 复制代码

import  pinia from '@/store/pinia';

import  {userAppStore} from '@/store/index';

const store = userAppStore(pinia)
....你需要操作的数据

以上就是pinia的使用和遇见的问题，后续遇到别的问题再行补充。