vue2使用pinia.js的详细教程，踩坑解决方法

多思考多学习

已于 2022-12-05 11:25:47 修改

阅读量3.2k

点赞数

文章标签： javascript vue.js 前端

于 2022-07-21 15:45:02 首次发布

本文链接：https://blog.csdn.net/weixin_45753961/article/details/125913762

版权

本文档详细介绍了在 Vue2 项目中使用 Pinia 状态管理库的步骤，包括安装、配置、使用及遇到的数据丢失问题。在尝试通过监听刷新保存数据失败后，提出了解决 Webpack 报 'You may need an appropriate loader' 错误的方法，即配置Webpack支持mjs文件类型的es6语法解析。

摘要由CSDN通过智能技术生成

后续：

不好用，建议别用，刷新页面数据就没有了，而且也不能在监听刷新时用localStorage保存下来，因为监听到时数据是没有的。如果有解决方法请告诉我。

正文：

pinia成为正式的vue状态库，pinia就是vuex5
同时支持 Composition Api 和 Options api 的语法
去掉 mutations ，只有 state 、getters 和 actions
不支持嵌套的模块，通过组合 store 来代替
更完善的 Typescript 支持
清晰、显式的代码拆分（这一段是抄别人的hhhh）

① 安装

npm install pinia  --save

Vue2 需要额外安装

cnpm i pinia @vue/composition-api --save

②main.js引入

import {
    createPinia, PiniaVuePlugin } from 'pinia'  //导入pinia
const pinia = createPinia();        //调用创建pinia
Vue.use(PiniaVuePlugin)

new Vue({
   
  el: '#app',
  pinia,
  components: {
    App },
  template: '<App/>'
}).$mount('#app')