通过一个简单的例子学会vuex与模块化

前言

Vuex 强调使用单一状态树,即在一个项目里只有一个 store,这个 store 集中管理了项目中所有的数据以及对数据的操作行为。但是这样带来的问题是 store 可能会非常臃肿庞大不易维护,所以就需要对状态树进行模块化的拆分。

这篇文章预设你已经了解vue相关的基础知识,因此本文不再赘述。需要学习的朋友可以参考这篇文章:http://www.jb51.net/article/110212.htm

对vuex的定位和解释可以看官方文档,说的很详细了,需要的朋友也可以通过这篇文章进行详细的了解:http://www.jb51.net/article/111582.htm

本文主要从实用的角度写一写如何在实际项目中使用vuex,例子真的很简单(简陋),但是主要是理解这种思维就好。

示例教程

例子是在vue-cli基础上构建的,以下是src文件下的内容目录。

├── App.vue
├── components // 组件文件夹
│ ├── tab1.vue
│ ├── tab2.vue
│ ├── tab3.vue
│ └── tab4.vue
├── main.js // vue的主文件入口
├── router // vue-router文件
│ └── index.js
└── store // vuex文件
 ├── action.js // action
 ├── getter.js // getter
 ├── index.js // vuex的主文件
 ├── module // 模块文件
 │ ├── tab2.js
 │ └── tab3.js
 ├── mutation-type.js // mutation常量名文件
 └── mutation.js // mutation

效果是这样的(不要嫌弃简陋啊啊啊)

在这个例子里,把文档里提到的vuex的相关知识都使用了一遍,包括模块相关的知识,基本把一般的使用场景都覆盖了吧。

那不废话了,开始吧。

首先app.vue和router两部分是和路由相关,就是很简单的东西,看看文档就能了解。

vuex的模块化

在写这个例子之前看了很多的开源项目的代码,一开始蛮新鲜的,毕竟之前项目中并没有深度使用过vuex,基本就是一个store.js里把vuex的功能就都完成了,但是项目复杂肯定不能这么写,正好现在有这个需求,我就想写个例子理一理这方面的思路。结果还是蛮简单的。

store文件里的内容就是按照vuex五个核心概念建立的,这么做的好处对于梳理业务逻辑和后期维护都是极大的方便,比如mutation.js和mutation-type.js这两个文件:

// mutation-type.js

const CHANGE_COUNT = 'CHANGE_COUNT';

export default {
 CHANGE_COUNT
}
// mutation.js

import type from './mutation-type'

let mutations = {
 [type.CHANGE_COUNT](state) {
 state.count++
 }
}

export default mutations

将mutation中的方法名单独作为常量提取出来,放在单独的文件中,用的时候引用相关的内容,这样非常便于管理和了解有哪些方法存在,很直观。另一方面,有时候可能需要用到action,可以使用相同的方法名,只要再引入常量的文件就行。

// action.js
import type from './mutation-type'

let actions = {
 [type.CHANGE_COUNT]({ commit }) {

 commit(type.CHANGE_COUNT)

 }
}

export default actions

怎么样,这样是不是看起来就没有写在一个文件里那么乱了。

...mapGetters和...mapActions

tab1.vue里:

// tab1.vue
<template>
 <div>
 <p>这是tab1的内容</p>
 <em @click="add">{{count}}</em>
 <p>getter:{{NewArr}}</p>
 </div>
</template>

<script>
import { mapActions, mapGetters } from "vuex";
import type from "../store/mutation-type";
export default {
 computed: {
 ...mapGetters([
 'NewArr'
 ]),
 count: function() {
 return this.$store.state.count;
 },
 },
 methods: {
 ...mapActions({
 CHANGE_COUNT: type.CHANGE_COUNT
 }),
 add: function() {
 this.CHANGE_COUNT(type.CHANGE_COUNT);
 }
 }
};
</script>

<style lang="" scoped>

</style>

index.js文件里:

import Vuex from 'vuex'
import Vue from 'vue'
import actions from './action'
import mutations from './mutation'
import getters from './getter'
import tab2 from './module/tab2'
import tab3 from './module/tab3'

Vue.use(Vuex)

let state = {
 count: 1,
 arr:[]
}

let store = new Vuex.Store({
 state,
 getters,
 mutations,
 actions,
 modules:{
 tab2,tab3
 }

})

export default store

vuex提供了一种叫做辅助函数的东西,他的好处能让你在一个页面集中展示一些需要用到的东西,并且在使用的时候也可以少写一些内容,不过这个不是必须,根据自己需要取用。

需要说明的是,他们两个生效的地方可不一样。

...mapGetters写在本页面的计算属性中,之后就可以像使用计算属性一样使用getters里的内容了。

...mapActions写在本页面的methods里面,既可以在其他方法里调用,甚至可以直接写在@click里面,像这样:

<em @click="CHANGE_COUNT">{{count}}</em>

酱紫,tab1里面的数字每次点击都会自增1。

mudule

vuex的文档里对于模块这部分写的比较模糊,还是得自己实际使用才能行。

在本例子中,我设置了两个模块:tab2和tab3,分别对应着同名的两个组件,当然,我这样只是为了测试,实际看tab2就可以。

// module/tab2.js
const tab2 = {
 state: {
 name:`这是tab2模块的内容`
 },
 mutations:{
 change2(state){
  state.name = `我修改了tab2模块的内容`
 }
 },
 getters:{
 name(state,getters,rootState){
  console.log(rootState)
  return state.name + ',使用getters修改'
 }
 }
}

export default tab2;
// tab2.vue
<template>
 <div>
 <p>这是tab2的内容</p>
 <strong @click="change">点击使用muttion修改模块tab2的内容:{{info}}</strong>
 <h4>{{newInfo}}</h4>
 </div>
</template>

<script>
export default {
 mounted() {
 // console.log(this.$store.commit('change2'))
 },
 computed: {
 info: function() {
 return this.$store.state.tab2.name;
 },
 newInfo(){
 return this.$store.getters.name;
 }
 },
 methods: {
 change() {
 this.$store.commit('change2')
 }
 }
};
</script>

<style lang="" scoped>

</style>

这个例子里主要是看怎么在页面中调用模块中的stated等。

首先说state,这个很简单,在页面中这样写就行:

this.$store.steta.tab2(模块名).name

在本页面的mounted中console一下$store,可以看到模块中,stete加了一层嵌套在state中的。

至于action,mutation,getter,和一般的使用方法一样,没有任何区别。

还有就是,在getter和action中,可以通过rootState获得根结构的state,mutation中没有此方法。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对我们的支持。

(0)

相关推荐

  • Vuex模块化实现待办事项的状态管理

    前言 在vue里,组件之间的作用域是独立的,父组件跟子组件之间的通讯可以通过prop属性来传参,但是在兄弟组件之间通讯就比较麻烦了.比如A组件要告诉一件事给B组件,那么A就要先告诉他们的爸组件,然后爸组件再告诉B.当组件比较多,要互相通讯的事情很多的话,爸组件要管他们那么多事,很累的.vuex正是为了解决这个问题,让多个子组件之间可以方便的通讯. 项目介绍 待办事项中的一个事件,它可能拥有几个状态,未完成.已完成.已取消或被删除等.这个事件需要在这多种状态之间切换,那么使用vuex来管理也是非常

  • 深入理解Vuex 模块化(module)

    一.为什么需要模块化 前面我们讲到的例子都在一个状态树里进行,当一个项目比较大时,所有的状态都集中在一起会得到一个比较大的对象,进而显得臃肿,难以维护.为了解决这个问题,Vuex允许我们将store分割成模块(module),每个module有自己的state,mutation,action,getter,甚至还可以往下嵌套模块,下面我们看一个典型的模块化例子 const moduleA = { state: {....}, mutations: {....}, actions: {....},

  • 通过一个简单的例子学会vuex与模块化

    前言 Vuex 强调使用单一状态树,即在一个项目里只有一个 store,这个 store 集中管理了项目中所有的数据以及对数据的操作行为.但是这样带来的问题是 store 可能会非常臃肿庞大不易维护,所以就需要对状态树进行模块化的拆分. 这篇文章预设你已经了解vue相关的基础知识,因此本文不再赘述.需要学习的朋友可以参考这篇文章:http://www.jb51.net/article/110212.htm 对vuex的定位和解释可以看官方文档,说的很详细了,需要的朋友也可以通过这篇文章进行详细的

  • 利用一个简单的例子窥探CPython内核的运行机制

    我最近花了一些时间在探索CPython,并且我想要在这里分享我的一些冒险经历.Allison Kaptur的excellent guide to getting started with Python internals有一点啰嗦,我想逐步介绍我自己的探索过程会更加有条理性,这样也许其他好奇的Python使用者可以跟着一起做. 1.注意到了一些奇怪的事情 一开始,我只是设置好Nose对一些我写的Python 3代码进行测试.当我运行这些测试的时候,我得到了一个不可思议的错误信息:"TypeErr

  • 轻松创建nodejs服务器(1):一个简单nodejs服务器例子

    我们先来实现一个简单的例子,hello world. 似乎每种语言教程的第一节都会讲这个,我们也不例外. 首先我们先创建一个项目目录,目录可自己定义,本案例的目录为 e:/nodetest/. 由于我们要搭建的是服务器,所以我把第一个文件命名为server.js. 在server.js里面输入以下代码: 复制代码 代码如下: var http = require("http");   http.createServer(function(request, response) {    

  • 使用Python的Twisted框架实现一个简单的服务器

    预览   twisted是一个被设计的非常灵活框架以至于能够让你写出非常强大的服务器.这种灵活的代价是需要好通过好几个层次来实现你的服务器, 本文档描述的是Protocol层,你将在这个层次中执行协议的分析和处理,如果你正在执行一个应用程序,那么你应该在读过top level的为twisted写插件一节中的怎样开始写twisted应用程序之后阅读本章.这个文档只是和TCP,SSL和Unix套接字服务器有关,同时也将有另一份文档专门讲解UDP.   你的协议处理类通常是twisted.intern

  • 分析C语言一个简单程序

    首先给大家一个简单的例子,让读者有个整体的认识,代码如下: #include <stdio.h> int main() { puts("我们"); return 0; } 函数的概念 先来看第4行代码,这行代码会在显示器上输出"我们".前面我们已经讲过,puts 后面要带( ),字符串也要放在( )中. 在C语言中,有的语句使用时不能带括号,有的语句必须带括号.带括号的称为函数(Function) . C语言提供了很多功能,例如输入输出.获得日期时间.文

  • VUE写一个简单的表格实例

    目录: 1.脚本式开发. 2.工程化开发 3.工程化和脚本的区别 4.来个table试试水 4,1.目标 4.2.思路 4.3.设计与编码 4.4.效果 5.业务分离 6.功能拓展--个性化设置 正文: 我以前是后端(asp.net)开发,会点js.jQuery,但是不会写js特效,至于css嘛,拿来用现成的可以,自己动手写就不会了. 发现现在前端开发的势头太猛了,有一点要干掉后端的感觉,于是萌发了想要学一学前端开发的想法.那么前端三大框架,先学哪一个呢?就先学学Vue吧,为啥呢?很简单呀,他只

  • Python实现一个简单的递归下降分析器

    问题 你想根据一组语法规则解析文本并执行命令,或者构造一个代表输入的抽象语法树. 如果语法非常简单,你可以不去使用一些框架,而是自己写这个解析器. 解决方案 在这个问题中,我们集中讨论根据特殊语法去解析文本的问题. 为了这样做,你首先要以BNF或者EBNF形式指定一个标准语法. 比如,一个简单数学表达式语法可能像下面这样: expr ::= expr + term     |   expr - term     |   term term ::= term * factor     |   te

  • 详解如何实现一个简单的 vuex

    首先我们需要知道为何要使用 vuex.父子组件通信用 prop 和自定义事件可以搞定,简单的非父子组件通信用 bus(一个空的 Vue 实例).那么使用 vuex 就是为了解决复杂的非父子组件通信. 仅仅会使用 vuex 没什么,看过文档敲敲代码大家都会.难道你就不想知道 vuex 是如何实现的?! 抛开 vuex 的源码,我们先来想想如何实现一个简单的 "vuex".有多简单呢,我不要 getter.mutation.action 等,我只要 state 就行了. 非父子组件通信 在

  • 详解vuex的简单todolist例子

    一个简单的vuex应用的小例子,一段自己的学习记录. todolist就是一个简单的输入框,一个按钮,一个文本显示区域,可以逐条进行删除. 1.在用vue-cli生成好的HelloWorld.vue文件中直接写代码,先删除所有的自带代码 <template> <div class="hello"> <input type="text"> <button>增加事项</button> <ul> &l

  • 一个简单的XML Schema的例子

    我们可以看到,DTD的语法相当复杂,并且它不符合XML文件的标准,自成一个体系.也就是说DTD文档本身并不是一个良好形式的XML文档,上面的关于DTD的介绍也仅仅是作了一个简介,目的是帮助大家能读懂DTD文件以及在必要时创建简单的DTD文件,因为现在很多的XML应用是建立在DTD之上的. 另外一个代替DTD的就是W3C定义的Schema,Schema从字面意义上来说,可以翻译成模式.大纲.计划.规划等等.它的基本意思就是说为XML文档制定一种模式. Schema相对于DTD的明显好处

随机推荐