vuex模块方式的写法和使用_vuex 在哪个模块写方法-CSDN博客

本文链接：https://blog.csdn.net/lys1925/article/details/114690441

本文详细介绍了如何在Vue项目中集成Vuex进行状态管理。包括安装Vuex、创建store、定义状态、getters、mutations及actions，以及在.vue文件中使用这些功能。

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

１．安装vuex

npm install vuex --save

２．新建index.js代码如下：

import Vue from 'vue'
import Vuex from 'vuex'
import alarm from './alarm'

Vue.use(Vuex)

const store = new Vuex.store({
    modules:{
        alarm
    }
})

export default store

３．alarm的模块代码如下

const state = {
    count:0
}


const getters = {
    count:(state)=>state.count
}
const mutations = {
    increase(state,newData){
        state.count = newData
    },
    remove(state,newData){
        state.count = newData
    }
}
const actions = {
    add({commit},data){
        commit('increase',data+1)
    },
    minus({commit},data){
        commit('remove',data-1)
    }
}
export default {
    state,
    getters,
    mutations,
    actions
}

４．main.js引入index.js

import store from './store/index.js

new Vue({
    store,
    render: h =>h(App),
}).$mount('#app)
５．.vue文件中使用


<button @click='add'>增加</button>
<button @click='remove'>减少</button>

{{count}}


import {mapGetters,mapActions} from 'vuex'

computed:{
    ...mapGetters('alarm',['count'])
}

mapActions('alarm',['add','minus'])
add(){
    this.add(this.count)
}
remove(){
    this.minus(this.count)
}