当前位置：首页 > news >正文

vue3中状态管理pinia得使用

news 2025/8/17 0:03:31

在做项目中 vue2改造vue3项目时的vuex 发生得一些变化

vue3项目中

在这里插入图片描述

先看下 stores.jsimport { defineStore } from 'pinia'  引入方法注册方法
import { getListFieldLevel } from '..api/index.js'export const useScreenStore = defineStore('screen', {state: () => ({fieldList: [],  定义instanceCodeOptions: ['11']}),actions: {  通过actions改变state的值async queryFieldList(vo) {try {let datalet res = await getListFieldLevel(vo)data = res.dataconst fieldSelect = (data || []).map((item) => {let obj = {...item,id: getInstanceType('333333')}return obj})this.fieldList = fieldSelectreturn fieldSelect} catch (err) {this.fieldList = []return []}},setInstanceCodeOptions(vo) {this.instanceCodeOptions = { ...this.instanceCodeOptions, ...vo }}}
})function getInstanceType(item) {return Number(item)
}

外面使用

import { mapState, mapActions } from 'pinia'
import { useScreenStore } from '@/stores/screenStore'computed: {...mapState(useScreenStore, {instanceCodeOptions: (store) => store.instanceCodeOptions || {} }),},methods: {...mapActions(useScreenStore, ['setInstanceCodeOptions']),//useScreenStore 知道是那个store下的方法    open(){this.setInstanceCodeOptions('444')  直接調用setInstanceCodeOptions方法console.log(this.instanceCodeOptions)}}