vue2中使用pinia的记录

最新推荐文章于 2025-02-25 17:29:46 发布

阿吧阿巴阿巴

最新推荐文章于 2025-02-25 17:29:46 发布

阅读量681

点赞数

文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/z750467878/article/details/127687564

版权

提示：工作中需要写一个网页，移动端PC端布局不同，但是有些数据相同，就可以用pinia进行状态管理

使用步骤

一、安装pinia
二、在main.js中引入
三、在vue.config.js中配置
四、开始使用
- 1.在store文件夹下新建一个news.js文件
- 2.去页面中引入使用

一、安装pinia

yarn add pinia
yarn add @vue/composition-api   //vue2中需要这个组合式 API 包

二、在main.js中引入

//在main.js中引入
import {createPinia,PiniaVuePlugin} from 'pinia'
Vue.use(PiniaVuePlugin)
const pinia = createPinia()//需要挂载在实例上

new Vue({
  pinia,
  render: h => h(App)
  
}).$mount('#app')

三、在vue.config.js中配置

//在vue.config.js中配置，不然会报错
configureWebpack: { 
    module: {
      rules: [
        {
          test: /\.mjs$/,
          include: /node_modules/,
          type: "javascript/auto"
        }
      ]
    }
  }

四、开始使用

1.在store文件夹下新建一个news.js文件

在这里插入图片描述

2.去页面中引入使用

import { mapState } from 'pinia';
import {useNewsStore} from '@/store/news.js'
export default {
    computed: {
        //pinia中的新闻列表数据
        ...mapState(useNewsStore, ['articleList','reverseList','cooper']),
    },
}