vue全家桶(vue-cli, vue-router, axios, vuex)

vue全家桶包括(vue,vue-cli, vue-router, axios, vuex)

一、Vue

vue官网:https://cn.vuejs.org/

这是逛官网对vue的介绍vue全家桶(vue-cli, vue-router, axios, vuex)_第1张图片
 我所整理关于vue的简介:https://blog.csdn.net/qq_40015826/article/details/89318068

二、Vue-router

Vue的路由,先献上文档 https://router.vuejs.org/zh-cn/
  这个网站介绍的也挺详细的:http://doc.liangxinghua.com/vue-family/3.1.html

路由在全家桶里面定位是什么呢,创建单页应用!简单!我们知道Vuejs是一系列的组件组成应用,既然是组件那么就需要组合起来,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们!
  以下是我在rotuer中的使用
vue全家桶(vue-cli, vue-router, axios, vuex)_第2张图片

三、Vue-cli

vue脚手架快速构建项目
vue-cli2.0使用教程:https://blog.csdn.net/qq_40015826/article/details/89245564
vue-cli3.0使用教程:https://blog.csdn.net/qq_40015826/article/details/89249086

四、vuex状态管理

还是先献上文档https://vuex.vuejs.org/zh-cn/

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。什么是状态管理?可以简单理解为管理数据流,多页面共享一个data库(全局)。
 说到vuex就肯定会有State、Actions、Mutations、Getters、Moudles

(1)State

Vuex 使用 单一状态树 —— State,用一个对象就包含了全部的应用层级状态。就是放页面共享数据的地方。(私有数据还是放自己.vue文件更好)

(2)Actions

Action 类似于 mutation,不同在于:

Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
  就是说异步方法放入Actions,如ajax请求,求情获取到数据之后显示提交mutation里面的方法来改变state。

(3)Mutations

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。一条重要的原则就是要记住 mutation 必须是同步函数。组件中使用 this.$store.commit(‘xxx’) 提交,在action里面使用commit(‘xxx’) 提交。

(4)Getters

有时候我们需要从 store 中的 state 中派生出一些状态,Vuex 允许我们在 store 中定义『getters』(可以认为是 store 的计算属性)。Getters 接受 state 作为其第一个参数:

vue全家桶(vue-cli, vue-router, axios, vuex)_第3张图片

Getters 会暴露为 store.getters 对象供调用。

(5)Modules

简单点说就是为了方便操作和管理,模块化。

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。

为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

以下是配置
vue全家桶(vue-cli, vue-router, axios, vuex)_第4张图片
vue全家桶(vue-cli, vue-router, axios, vuex)_第5张图片

五、axios

就是封装的ajax,可以根据自己的项目情况再进行封装,然后action中调用。具体可以参考https://github.com/mzabriskie/axios
vue全家桶(vue-cli, vue-router, axios, vuex)_第6张图片

你可能感兴趣的:(vue)