Vuex非常适合新手的教程,保教不会!
本讲解基于Vue-cli(脚手架)搭建的项目。
Vuex 数据状态管理工具,整个流程类似依赖注入,相当于预先定义,倒推。(个人理解)
1. 安装vuex 命令行输入
npm install vuex --save
2.在根目录的src下新建 store文件夹,并且在其内创建5个js文件。
index.js中写入代码 (主要是汇集处理其他4个js文件)
import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as mutations from './mutations'
import * as getters from './getters'
import state from './rootState' Vue.use(Vuex) //引用vuex const store = new Vuex.Store({
state,
getters,
actions,
mutations
}) export default store;
在根目录的src下的 main.js 中引入store
rootState.js 主要预先定义了一些将要处理的数据 actions.js 主要预先定义了一些方法,把从组件获取的数据提交到类似缓存状态
mutations.js 主要对rootState.js中的数据与缓存的数据进行赋值等操作
getters.js 主要获取了rootState.js中被处理的数据,等待被注入使用的组件中 新建一个test.vue
//引入vue,vuex,
<template>
<div>
<div class="content">
<h1>测试</h1>
<div>
<span>{{ msg }}</span>..
<!-- 注入的属性 -->
<button @click='fun'>获取数据</button>
<!-- 注入的方法 -->
</div>
</div>
</div>
</template> <script>
import Vue from 'vue';
import { mapGetters, mapActions } from 'vuex'; // 这个例子的用意是:
// ①、用户点击button,触发绑定在click上的fun方法
// ②、fun是定义在actions.js中的,这个方法会调用vue自带的commit方法
// ③、commit方法会自动调用mutations中对应的方法
// ④、在mutations中更新store上的数据msg,从而Test.vue中的msg自动得到更新
export default {
name: 'test',
methods: {
...mapActions([ // 和引入的vuex中的mapActions对应
'fun', // 在src/store/actions.js中创建一个名为fun的方法 在这里注入即可使用(方法)
]),
},
computed: {
...mapGetters([ //和引入的vuex中的mapGetters对应
'msg' // 在src/store/getters.js中创建一个名为msg的方法 在这里注入使用 (计算属性)
]),
}
}
</script> <style scoped > </style>
//导出了fun这个方法 在test.vue中注入使用
//定义了个fun方法其中自带了第一个参数{{commit}},还可以在test.vue使用fun 这个方法时传入参数,即为这里的第二个参数,以此类推,这里没新传入参数
export const fun = ({commit})=>{
commit({
type: 'getMsg', // 这个type很重要,vue会自动去找mutations.js中名为getMsg的方法 //类似被注入的方法
msg:'提交的数据1111', // 这里的参数写死了,可以自定义,也可通过传参设定
});//commit方法作用类似把这其中的这个参数对象提交到缓存,以便在mutations.js中对这些数据处理
}
然后 mutations.js
//定义了个 getMsg 方法 传入两个参数 state(rootState.js中定义的数据),payload(actions.js中传来的对象)
export const getMsg = (state, payload) => {
state.msg = payload.msg;//赋值给想变化的值
}
之后 getters.js
导出msg这个计算属性 在test.vue中注入使用
export const msg = state => state.msg; //获取rootState.js的state作为参数(此时已经被mutations.js的方法赋值),再导出msg这个带值方法
最后基本过程:
用户点击button,触发绑定在click上的fun方法
fun是定义在actions.js中的,这个方法会调用vue自带的commit方法
commit方法会自动调用mutations中对应的方法
在mutations中更新store上的数据msg,从而Test.vue中的msg自动得到更新
本教程vue项目的完整地址在---------- https://github.com/TKBnice/vue-res
Vuex非常适合新手的教程,保教不会!的更多相关文章
- gulp的使用以及Gulp新手入门教程
Gulp新手入门教程 原文 http://w3ctrain.com/2015/12/22/gulp-for-beginners/ Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭 ...
- Linux 新手入门教程
Linux 新手入门教程 1991年10月5日,Linus Torvalds 在互联网上发布消息,宣布他自己开发的内核系统诞生了.他将内核源代码保存在芬兰最大的 FTP 网站上,命名为 Linux,取 ...
- GitHub 上适合新手的开源项目(Python 篇)
作者:HelloGitHub-卤蛋 随着 Python 语言的流行,越来越多的人加入到了 Python 的大家庭中.为什么这么多人学 Python ?我要喊出那句话了:"人生苦短,我用 Py ...
- Xorboot-UEFI新手入门教程
Xorboot-UEFI新手入门教程 Xorboot-UEFI是一款UEFI下轻量级的图形化多系统引导程序,pauly于2014年国庆节期间发布了预览版.搜了下论坛,关于Xorboot- ...
- Gulp新手入门教程
Gulp 是一个自动化工具,前端开发者可以使用它来处理常见任务: 搭建web服务器 文件保存时自动重载浏览器 使用预处理器如Sass.LESS 优化资源,比如压缩CSS.JavaScript.压缩图片 ...
- Windows学习总结(6)——MindManager新手入门教程
MindManager新手入门教程 MindManager是一款创造.管理和交流思想的思维导图软件,其直观清晰的可视化界面和强大的功能可以快速捕捉.组织和共享思维.想法.资源和项目进程等等.MindM ...
- 适合新手:从零开发一个IM服务端(基于Netty,有完整源码)
本文由“yuanrw”分享,博客:juejin.im/user/5cefab8451882510eb758606,收录时内容有改动和修订. 0.引言 站长提示:本文适合IM新手阅读,但最好有一定的网络 ...
- 思维导图软件MindManager新手入门教程
MindManager是一款创造.管理和交流思想的思维导图软件,其直观清晰的可视化界面和强大的功能可以快速捕捉.组织和共享思维.想法.资源和项目进程等等.MindManager新手入门教程专为新手用户 ...
- 最适合和最不适合新手使用的几款 Linux 发行版
大多数知名的Linux发行版都属于"比较容易使用"这一类.一些观察人士可能会驳斥这个观点,但事实上,说到Linux,大多数并非从事IT或软件开发工作的人会被最容易的使用体验所吸引. ...
随机推荐
- 使用 Hibernate 和 MySQL 需要知道的五件事
https://www.thoughts-on-java.org/5-things-you-need-to-know-when-using-hibernate-with-mysql/ 作者:Thorb ...
- Java中数组的遍历
(I)标准for循环遍历数组 例如代码片段: int [] nums = new int [] {0,1,2,3,4,5,6,7,8,9}; for(int i=0;i<11;i++){ Sys ...
- Jvm加载jar包的顺序
使用-XX:+TraceClassPaths或者在服务器上执行jinfo时,都能得到classpath包含的jar包,例如: java.class.path = local/aaa/lib/sprin ...
- [译]ASP.NET Core 2.0 全局配置项
问题 如何在 ASP.NET Core 2.0 应用程序中读取全局配置项? 答案 首先新建一个空项目,并添加两个配置文件: 1. appsettings.json { "Section1&q ...
- 使用EF操作Mysql数据库中文变问号的解决方案
问题场景:使用Entity Framework 6.0 操作Mysql数据库,中文保存至数据库后全部变成问号.但是使用Mysql API却不会. 原因排查:首先想到的肯定是数据库编码问题,一次查询了表 ...
- [ACdream]女神教你字符串——违和感
题目描述: 女神最喜欢字符串了,字符串神马的最有爱了. 女神是一个重度强迫症患者,面对不是对称的东西,她会觉得太违和了,就会爆炸.所以她手上的字符串都是回文的,像什么a,b,aabaa,abcba,上 ...
- VPS搭建离线下载服务器——后网盘时代
动机 由于学习的需要,在国外某服务器厂商购买了vps服务(至于是哪个厂商就不说啦).但是呢,就算用作梯子,一个月1T的流量总是用不完.最经觉得自己营养充足,想找点电影看看. 无奈现在百度网盘的速度真的 ...
- 版本控制之五:SVN trunk(主线) branch(分支) tag(标记) 用法详解和详细操作步骤(转)
使用场景: 假如你的项目(这里指的是手机客户端项目)的某个版本(例如1.0版本)已经完成开发.测试并已经上线了,接下来接到新的需求,新需求的开发需要修改多个文件中的代码,当需求已经开始开发一段时间的时 ...
- The Balance
The Balance Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total S ...
- 关于01背包求第k优解
引用:http://szy961124.blog.163.com/blog/static/132346674201092775320970/ 求次优解.第K优解 对于求次优解.第K优解类的问题,如果相 ...