因为Vuex Store是全局注册的,不利于较大的项目,引入模块分离业务状态和方法,引入命名空间解决不同模块内(getters,mutaions,actions)名称冲突的问题

------------------------------------------------------------------

首先建立一个模块 ./store/modules/sample.js

import SampleAPI from '@/api/sample-api-proxy.js'
import { _AjaxUrl } from '@/store/constants' const state = {
all: []
}
const mutations = {
resolve (state, payload) {
for (let item of payload) {
state.all.push(item)
}
}
}
const getters = {
allstr (state) {
return state.join(',')
}
}
const actions = {
async init ({commit,state}, pid) {
await SampleAPI.get(_AjaxUrl + '/api/game/all', params: {pid}).then((res) => {
state.all = res.all
commit('resolve', res.data)
})
}
} export default {
namespaced: true,
state, mutations, getters, actions
}

./store/index.js 注入模块

import Vuex from 'vuex'
import sample_module from './modules/sample'
import other_module from './modules/other' export default new Vuex.Store({
//全局Store对象
mutations,
actions,
state, //模块
modules: {
sample: sample_module,
other: other_module
}
})

启动程序(main.js)中注册 store 到根组件

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex)
new Vue({
el: '#app',
data() {
return { rootParam: 'test' }
},
store,
router,
template: '<Home/>',
components: { Home }
})

页面组件(./components/sample.vue)中声明并调用

<template>
<div id="container">
<ul class="sample-ul">
<li v-for="(item, index) in all" :key="index">
<span>{{item}}</span>
<button @click="removeItem(index)">删除</button>
</li>
</ul>
<div>{{all2str}}</div>
</div>
</template> <style lang="stylus" rel="stylesheet/stylus" scoped>
@import '~style/common.styl'
nospace()
margin 0
padding 0
height(h)
height unit(h, 'px')
line-height unit(h, 'px') .sample-ul
list-style-type none
@nospace
li
display block
height(20)
&:hover
background-color #fcc
</style> <script type="text/ecmascript-6">
import { createNamespacedHelpers, mapState } from 'vuex'
const { mapActions, mapGetters, mapMutations } = createNamespacedHelpers('sample')
const { mapActions: mapOtherActions, mapGetters: mapOtherGetters } = createNamespacedHelpers('other') export default{
data() {
return { }
},
computed: {
...mapState({
all : state => state.sample.all
}),
...mapGetters(['all2str']),
...mapOtherGetters(['test'])
},
methods: {
...mapActions(['loadDataAsync']),
...mapMutations(['removeItem']),
...mapOtherMutations(['testing'])
},
created() {
const pid = this.$route.query.pid
this.loadDataAsync(keep, pid)
}
}
</script>

推荐使用对象展开运算符将 mapMutations,mapGetters,mapActions,mapState 混入到页面组件,页面仅用于交互体验,不要参杂过多的业务逻辑和状态
通过 createNamespacedHelpers 映射到命名空间

项目结构:

├── index.html
├── main.js
├── api
│ ├── sample-api-proxy.js
│ └── ...
├── components
│ ├── sample.vue
│ └── ...
└── store
├── index.js
├── actions.js
├── mutations.js
├── state.js
└── modules
├── sample.js
└── other.js

一个简单的实例演示vuex模块化和命名空间的更多相关文章

  1. C语言入门教程: 一个简单的实例

    对于学习要保持敬畏! 语言不只是一种工具,还是一种资源,因此,善待它,掌握它!   我们知道,对于未知通常都会充满好奇和畏惧,既想了解它,又害怕神秘面纱隐藏的不确定性.对于一门编程语言同样如此,我将以 ...

  2. vue-cli安装以及创建一个简单的项目(二)(vuex使用、发行一个简单的app)

    1.vuex的使用 vuex是vue的状态管理中心,vuex来保存我们需要管理的状态值,值一旦被修改,所有引用该值的地方就会自动更新,常用于: 1.多个视图依赖同一状态(l例:菜单导航) 2.来自不同 ...

  3. 大话JS面向对象之扩展篇 面向对象与面向过程之间的博弈论(OO Vs 过程)------(一个简单的实例引发的沉思)

    一,总体概要 1,笔者浅谈 我是从学习Java编程开始接触OOP(面向对象编程),刚开始使用Java编写程序的时候感觉很别扭(面向对象式编程因为引入了类.对象.实例等概念,非常贴合人类对于世间万物的认 ...

  4. 原生Ajax用法——一个简单的实例

    Ajax全名(Asynchronous(异步) JavaScript and XML )是可以实现局部刷新的 在讲AJax之前我们先用简单的实例说一下同步和异步这个概念 /*异步的概念(就是当领导有一 ...

  5. 爬虫基础以及一个简单的实例(requests,re)

    最近在看爬虫方面的知识,看到崔庆才所著的<Python3网络爬虫开发实战>一书讲的比较系统,果断入手学习.下面根据书中的内容,简单总结一下爬虫的基础知识,并且实际练习一下.详细内容请见:h ...

  6. Django学习 之 Django安装与一个简单的实例认识

    一.Django简介 1.MVC与MTV模型 (1)MVC模型 Web服务器开发领域里著名的MVC模式,所谓MVC就是把Web应用分为模型(M),控制器(C)和视图(V)三层,他们之间以一种插件式的. ...

  7. 在vue中使用vuex 一个简单的实例

    1.安装vuex:npm install vuex --save 2.在main.js文件中引入vuex (请忽略其它代码) 3.建一个vuex文件夹,然后在建一个store.js(这两个文件名字可以 ...

  8. c#一个简单的实例告诉你,多继承还可以这么来

    我想多继承,要怎么搞???我想你一定会说“接口”,那么你有没有遇到这样的问题,你需要在一个类中继承另外2个类的所有方法,你要怎么做呢???难道要Coyp实现代码?No,往下看... 定义一个空接口比如 ...

  9. ubuntu 中安装memcache,并给出一个简单的实例·

    Memcache分为两部分,Memcache服务端和客户端.Memcache服务端是作为服务来运行的,所有数据缓存的建立,存储,删除实际上都是在这里完成的.客户端,在这里我们指的是PHP的可以调用的扩 ...

随机推荐

  1. RNAseq测序reads定位

    RNAseq测序reads定位 发表评论 3,210 A+ 所属分类:Transcriptomics   收  藏 获得RNA-seq的原始数据后,首先需要将所有测序读段通过序列映射(mapping) ...

  2. [Javasript] 同时实现单击和双击事件

    在同一个元素上同时绑定单击和双击事件: JavaScript <script type="text/javascript"> var timer = 0; var de ...

  3. Java中的Integer和int

    Java中的Integer是引用类型,而int是基本类型.Integer是int的包装器类型. java中的基本类型有布尔类型boolean;字符类型char;整数类型byte,int,long,sh ...

  4. 解决拼音输入法会触发input事件的问题

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script sr ...

  5. ubuntu 重启nginx遇到错误

    错误如下:Job for nginx.service failed because the control process exited with error code. See "syst ...

  6. ABP的确认框

    使用之前,是需要添加对abp.sweet-alert.js的引用,否则就无法正常使用. 确认框 abp.message.info('some info message', 'some optional ...

  7. 计算机爱好者协会技术贴markdown第三期

    之前都是给大家展示的对文本的基本操作,这一期我们要给大家展示的就是很高大上的东西了哦 看左边是不是超low,右边是不是瞬间高大上了!!! 一个简单的表格是这么创建的: 爱酱     | Value - ...

  8. 01 C语言程序设计--01 C语言基础--第1章 C语言概述&第2章 GCC和GDB

    走进嵌入式开发的世界,企业级项目课程让你达到企业嵌入式应用开发要求.名师在线答疑,解决疑难.科学评测体系,系统评估学习.核心项目实........ 30 门课程 241小时12分钟 824 人学习 学 ...

  9. requests+正则爬取猫眼电影前100

    最近复习功课,日常码农生活. import requests from requests.exceptions import RequestException import re import jso ...

  10. Unity3D中AssetBundle应用

    工程中的模型等资源转化为Prefab后,打包成AssetBundle,可以大幅降低资源的空间占有度,并且提高资源加载的效率. 一.AssetBundle的打包 先看下打包Prefab的脚本代码,这段脚 ...