Vuex 进阶之模块化组织详解(2)

import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) import getters from './getters' import actions from './actions' import users from './modules/user' // 导出 store 对象 export default new Vuex.Store({ getters, actions, modules:{ users } })

注意:在导出 store 对象时,因为 getters 和 actions 在 vuex 的核心概念中有默认,可以直接写入。但是 users 不是默认的,所以用到 vuex 中的 modules 对象进行导出

Vuex 进阶之模块化组织详解

核心概念

7. Vue.app 文件不作任何修改

<template> <div> <button @click="increment">增加</button> <button @click="decrement">减少</button> <button @click="incrementAsync">延时增加</button> <p>{{count}}</p> <p>{{isEvenOrOdd}}</p> </div> </template> <script> import { mapGetters, mapActions } from "vuex"; export default { name: 'app', data () { return { msg: 'Welcome to Your Vue.js App' } }, computed:mapGetters([ 'count', 'isEvenOrOdd' ]), methods:mapActions([ 'increment', 'decrement', 'incrementAsync' ]) } </script>

最后,惊心动魄的时候到了,我这费半天劲的东西到底能不能跑起来

Vuex 进阶之模块化组织详解

vuex模块化.gif

对于新手们来说,光是看一次可能很难理解这个过程,还是要亲自多试一试的,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/wyyyfj.html