vuex模块方式的写法和使用

１．安装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)
}