vue的挖坑和爬坑之vuex的简单入门
首先vuex的中文文档https://vuex.vuejs.org/zh-cn/
首先vuex是什么,官方解释是
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。
我的理解是
就是vue组件之间的数据管理
event bus
对于vue组件之间的数据传递,父子之间的简单的传递还算是简单,然后你要在各个组件之间传递的话就不太方便了,有两种解决方案暂时我只接触到了两种,其中一种就是用event bus,在入口js中定义一个bus(巴士)
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App },
data: {
Bus: new Vue()
}
});
然后你可以放数据放在bus中
this.$root.Bus.$emit('tab',-1);
然后你也可以随时提取
this.$root.Bus.$on('tab',(data)=>{
console.log(data);
})
你可以理解为全局变量,但是由于设置变量的地方比较随意,然后用的多或者是数据量大的话不利于管理。
vuex
于是这时候vuex出来了。
先介绍一下vuex中几个关键点,这张图介绍了vuex的处理机制。
state:既然vuex是用来储存数据的,那么我们的储存地点就是这里。
mutations:对数据的处理都是在这里进行。
actions:专门用来提交mutations的。
getters:获得到state上的数据的。
所以总的来说就是建立一个state,然后调用actions来提交mutations处理state中的数据,最后用getters得到state中的数据。
至于为什么要用actions来提交mutations处理state中的数据,原因是mutation 必须是同步函数,所以通过actions来调用mutations
首先npm install vuex一下,然后在src里新建一个store的文件夹,用来写vuex的文件,里面创建一个index.js,然后在main.js引入你创建的index.js并在new Vue中声明一下你引入的index文件。
import store from './store/index' new Vue({
// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
store,
el: '#app',
router,
template: '<App/>',
components: { App }
})
然后你可以在index里面写你的vuex文件了
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//储存
const state = {
i: 100
};
//处理state
const mutations = {
ADD(state) {
state.i++;
}
};
//提交mutations
const actions = {
add : function ({commit, state}) {
commit(ADD)
}
}
//获得state
const getters = {
getdata : state => state.notes.i
}
// 挂载
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
然后你在组件中可以调用getters获得对应的值
this.$store.getters.getdata
然后你可以在组件中调用actions
this.$store.dispatch('add')
以上是对vuex的最简单的一个demo的介绍
然后个人看到了几个比较好的简单的项目可以看看
https://github.com/ToWorkit/VUEX
https://github.com/coligo-io/notes-app-vuejs-vuex
还有的是如果你在actions和mutations中要传递值的话可以
//调用actions时传值
store.dispatch('add', {
data: 10
})
//调用mutations时传值
store.commit('increment', {
data: 10
})
最后还有一个module讲一下,如果你的Vuex有两个模块要储存的话你可以通过这种方式储存
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
} const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
} const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
}) store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态
vue的挖坑和爬坑之vuex的简单入门的更多相关文章
- vue的挖坑和爬坑之css背景图样式终极解决方法
原问题 #wrapper{ width:100%; height:100%; position:fixed; background-image:url(./img/open_bg.jpg) } 在.v ...
- Vue爬坑之vuex初识
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式 http://www.cnblogs.com/wisewrong/p/62660 ...
- NO.01---今天聊聊Vuex的简单入门
作为一款个人认为非常牛x的框架,个人使用起来得心应手,所以近期就记录一下这款框架吧. 首先说一说 Vuex 是什么? 官方给出的解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它 ...
- Git 爬坑路(从小白开始入门) ——(1)
通过git管理项目之前,需要先注册一个GitHub账号,方便在远程仓库进行项目管理. Git之项目在本地仓库的管理(从小白开始): 一.push到远程项目 1.在个人的GitHub账号中,创建一个远程 ...
- VueRouter爬坑第一篇-简单实践
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- VueRouter爬坑第二篇-动态路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- 《VueRouter爬坑第三篇》-嵌套路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- VueRouter爬坑第三篇-嵌套路由
VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送 后续VueRouter系列的文章的示例编写均基于该项目环境. ...
- Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求
Vue 原本有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource 目前主流的 Vue 项目,都选择 axios ...
随机推荐
- c# textbox的滚动条总是指向最底端
当我第一次添加滚动条时候,我发现滚动条总是跑向上方,经过研究 解决方案如下: this.textBox1.Focus(); 获取焦点 this.textBox1.Select(this.textBox ...
- .9-浅析webpack源码之NodeEnvironmentPlugin模块总览
介绍Compiler的构造比较无趣,不如先过后面的,在用到compiler的时候再做讲解. 这一节主要讲这行代码: // 不管这里 compiler = new Compiler(); compile ...
- springCloud zuul网关服务
第一步:编写application.properties文件 spring.application.name=api-gateway server.port=5555 zuul.routes.user ...
- 【Java集合源代码剖析】LinkedHashmap源代码剖析
转载请注明出处:http://blog.csdn.net/ns_code/article/details/37867985 前言:有网友建议分析下LinkedHashMap的源代码.于是花了一晚上时间 ...
- action属性注入为null
一. 问题: 今天调试代码遇到问题,使用spring管理action,当中注入了部分原始类型的属性. 配置示比例如以下: <bean class="test.login.test.Lo ...
- Azure: 给 ubuntu 虚机挂载数据盘
在 azure 上创建的虚机默认会分配两个磁盘,分别是系统盘和一个临时磁盘.如果我们要在系统中安装使用 mysql 等软件,需要再创建并挂载单独的数据盘用来保存数据库文件.这是因为临时磁盘被定义为:用 ...
- Spring官方文档翻译
随笔:有人曾这样评价spring,说它是Java语言的一个巅峰之作,称呼它为Java之美,今天,小编就领大家一起来领略一下spring之美! Spring官方文档:http://docs.spring ...
- FastDFS并发会有bug,其实我也不太信?- 一次并发问题的排查经历
前一段时间,业务部门同事反馈在一次生产服务器升级之后,POS消费上传小票业务偶现异常,上传小票业务有重试机制,有些重试三次也不会成功,他们排查了一下没有找到原因,希望架构部帮忙解决. 公司使用的是Fa ...
- Python 项目实践一(外星人入侵小游戏)第五篇
接着上节的继续学习,在本章中,我们将结束游戏<外星人入侵>的开发.我们将添加一个Play按钮,用于根据需要启动游戏以及在游戏结束后重启游戏.我们还将修改这个游戏,使其在玩家的等级提高时加快 ...
- sql基础题目测试及正确答案
在网上做了一套基本的sql题目,以下是我的写的答案,适合基础人员练练 --创建测试数据 use test create table Student(S# varchar(10),Sname nvarc ...