因为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. Python读取excel表的数据

    from openpyxl.reader.excel import load_workbook #读取xlsx文件def readExcelFile(path): dic={} #打开文件 file= ...

  2. sql server版本、组件和管理工具

    以下信息由何问起收集,希望有帮助. SQL Server 版本 定义 Enterprise 作为高级版本, SQL Server Enterprise 版提供了全面的高端数据中心功能,性能极为快捷.虚 ...

  3. 《笨方法学Python》加分题32

    注意一下 range 的用法.查一下 range 函数并理解它在第 22 行(我的答案),你可以直接将 elements 赋值为 range(0, 6) ,而无需使用 for 循环?在 python ...

  4. [DP][NOIP2015]子串

    子串 题目描述 有两个仅包含小写英文字母的字符串 A 和 B. 现在要从字符串 A 中取出 k 个 互不重叠 的非空子串, 然后把这 k 个子串按照其在字符串 A 中出现的顺序依次连接起来得到一个新的 ...

  5. Numpy Ndarray对象

    Numpy 最重要的一个特点是 N 维数组对象 ndarrary ,它是一系列同类型数据的集合,以 0 下标为开始进行集合中的索引. ndarray 对象是用于存放同类型元素的多维数组. ndarra ...

  6. MySQL 1053错误 服务无法正常启动的解决方法

    MySQL 1053错误 服务无法正常启动的解决方法 1.右键我的电脑,管理,进入服务 2.右键单击Mysql8 属性,选择登陆  选择此账号  登陆管理员账号

  7. 导入别人的项目eclipse 出现乱码 该如何处理

  8. Itreatot接口实现类中modCount的作用

    modCount只有在本数据结构对应迭代器中才使用,以HashMap为例: private abstract class HashIterator implements Iterator { Entr ...

  9. xbee PRO S2C的多固件烧写

    XBee and XBee-PRO ZB 嵌入式射频模块是与ZigBee/IEEE 802.15.4兼容的解决方案,可以满足低成本低功耗无线传感网络的特殊需求.该模块易于使用,极低的功耗,以及提供设备 ...

  10. flag:用心学习的第一天

    目标是:加油学习,尽早改变世界