vue3版本vuex实现获取与写入方法

最新推荐文章于 2025-05-13 15:58:41 发布

采药人~陈大仙

最新推荐文章于 2025-05-13 15:58:41 发布

阅读量7.4k

点赞数 1

分类专栏： vue3 store状态管理存取方法文章标签： vue js

本文链接：https://blog.youkuaiyun.com/weixin_46138124/article/details/112319527

版权

vue3 store状态管理存取方法专栏收录该内容

0 篇文章

订阅专栏

本文介绍如何在 Vue3 项目中利用 Vuex 进行分模块管理，详细讲解了在 store/index.js 文件中导入和配置 vuex 模块，接着在 store/appStore.js 文件中定义存取数据的方法，最后在 views/app.js 文件中进行数据渲染和存取操作的实际应用。

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

vue3版本vuex实现获取与写入方法

- - - - 1、store文件夹的index.js文件下操作vuex分模块管理导入：
        2、store/appStore.js文件创建存取需求的操作方法
        3、views/app.js文件下渲染、存取操作

1、store文件夹的index.js文件下操作vuex分模块管理导入：

import { createStore } from 'vuex'
import appStore from './appStore'

export default createStore({
  modules: {
    appStore
  }
})

2、store/appStore.js文件创建存取需求的操作方法

const appStore = {
    state: {
        totle: 10
    },
    mutations: {
        totleFun(state, value) {
            state.totle = value
        }
    },
    actions: {
        totleFunAdd(context, value) {
            context.commit('totleFun', value + 1)
        },
        totleFunDel(context, value) {
            context.commit('totleFun', value - 1)
        }
    }
}

export default appStore;

3、views/app.js文件下渲染、存取操作

<template>
  <div class="app">{{store.state.appStore.totle}}</h1>
    <button @click="add">+值</button> <button @click="del">-值</button>
  </div>
</template>

<script>
import { useStore } from 'vuex';

export default {
	setup() {
		const store = useStore();
		const add = () => {
      		store.dispatch('aFunAdd', store.state.appStore.totle)
    	}
    	const del = () => {
      		store.dispatch('aFunDel', store.state.appStore.totle)
    	}
    	return {
    		add,
    		del,
    		store
    	}
	}
}
</script>