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 对象进行导出
核心概念
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模块化.gif
对于新手们来说,光是看一次可能很难理解这个过程,还是要亲自多试一试的,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章: