vue.js - vuex的modules里面的东西怎么调用

问题描述

问 题

看了vuex的modules里面的内容,然后自己试了试,发现自己根本不会调用,躺倒...

这是mutations.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const modulesA = {
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++
        },
        decrease(state) {
            state.count--
        }
    },
    actions: {
        increment({
            state,
            commit,
            rootState
        }) {
            commit('increment')
        },
        decrease({
            state,
            commit,
            rootState
        }) {
            commit('decrease')
        }
    },
    getters: {
        bigCount(state, getters, rootState) {
            return state + 1
        }
    }
}

export const store = new Vuex.Store({
    modules: {
        a: modulesA
    }
})

这是main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import Vuex from 'vuex'
import router from './router'
import store from './store/mutations.js'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    store,
    template: '<App/>',
    components: {
        App
    }
})

这是Hello.vue

<template>
    <div class="hello">
        <span @click="decrease">-</span>
        <span>{{count}}</span>
        <span @click="increment">+</span>
        <span>我总是大一{{bigCount}}</span>
    </div>
</template>

<script>
import { mapState, mapAction, mapGetter } from 'vuex'

export default {
    name: 'hello',
    computed: {
        ...mapState({
            count: state => state.some.nested.myModules.count
        })
    },
    methods: {
        decrease() {

        }
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus">
.hello
    text-align center

span
    font-size 20px
    font-weight 700
    color #333
</style>

我想做的demo只是简单的点击减号减1,点击加号+1

关键是怎么获取状态,还有怎么触发事件,自己尝试了好多次了,还是没有出来...

解决方案

用了vue devtools 瞬间就解决了 哈哈

这篇关于vue.js - vuex的modules里面的东西怎么调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！