在vue2中pinia的使用

laro ff

已于 2023-03-21 17:47:14 修改

阅读量730

点赞数

文章标签： vue.js 前端 javascript

于 2023-03-07 14:17:30 首次发布

本文链接：https://blog.youkuaiyun.com/m0_63989259/article/details/129381283

版权

该文介绍了如何在Vue应用中利用Pinia进行状态管理。首先在store的index.js文件中定义了一个store，包含counter状态和increment、randomizeCounter两个action。然后在main.js入口文件中注册了Pinia插件并创建了实例。文章提供了存储和调用state的方法，强调了import和useStore的使用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

步骤：

根据官网操作

通过百度网络csdn查询他人所写，查缺补漏

store中index.js

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
    // 推荐使用 完整类型推断的箭头函数
    state: () => ({
        counter: 90,
    }),
    actions: {
        increment(msg) {
           this.counter=msg
           console.log(msg);
        },
        randomizeCounter(msg) {
            this.counter = msg
        },
    },
})

入口函数main.js

步骤：

插件必须注册

import Vue from 'vue'
// import { createApp } from 'vue'
import App from './App.vue'
import { createPinia, PiniaVuePlugin } from 'pinia'

Vue.use(PiniaVuePlugin)
const pinia = createPinia()

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

存储与调用

//存储
import { useStore } from '@/store/index'
const store = useStore()
store.存储方法（）

//调用
//与存储相同：导入+创建变量+调用方法

调用案例