vuex介绍和vuex数据传输流程

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
Vue.use(Vuex);
const store = new Vuex.store({
//配置项(vuex中5个属性,这里只说三个)
//公共仓库,储存数据
state:{
n:10
},
//处理异步函数和业务逻辑,里面的参数都是函数
actions:{ },
//主要用来修改state中的数据
mutations:{ }
})
export default store;
main.js:
import store from "./store/";
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
//挂载完成后,vue实例中增加了$store,即可通过this.$store来访问store对象的各种属性和方法
这个可以拿到store中数据,就可以在组件中进行页面的渲染 {{this.$store.state.n}} //100 --->state--->components
二、vuex数据传递流程:
如果组件中想要修改state中数据的值: <template>
<div class="hello">
<h2>home</h2>
<h3>{{this.$store.state.n}}</h3>
<button @click="handleClick()">修改</button>
</div>
</template>
你可能会想到在methods:{}中写handleClick函数修改,但这样是不行的。
原因:违反了vuex单向数据流的特点。 在当前组件中修改公共仓库state的值后,所有组件页面上的值都改变了,
如果程序出现错误,错误会无法捕获。
所以要遵循vuex的特点数据传递流程进行修改。
---> components--->actions methods:{
handleClick(){
this.$store.dispatch("handleAdd") //通过dispatch调用actions里的方法
}
}
actions:{
handleAdd(){
console.log("actions里的方法被调用了")
}
}
---> actions ---> mutations actions:{
handleAdd({commit},params){ //第一个参数是个对象,解构赋值拿到对象中的commit;第二个参数是传递给mutations的参数
commit("handlMutationseAdd") //通过commit调用 mutations里的方法
}
}
mutations:{
handlMutationseAdd(state,params){ //vuex中state属性 params:commit触发时,传递过来的数据
console.log("mutations被调用了",params)
state.n++;
console.log(state.n)
}
}
到此组件修改state中的数据完成,点击一次修改按钮n加1
接着页面上的数据重新进行了渲染----符合了vuex的特点数据是响应式的
5、总结下vuex数据传输流程
vuex介绍和vuex数据传输流程的更多相关文章
- vue2.0 axios封装、vuex介绍
一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击 跳转, ...
- vuex介绍
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...
- vuex 介绍
vuex是为vue.js开发的状态管理模式,负责vue的状态管理,状态管理是干啥的呢,举个栗子,比如一个酒店,哪间屋子入住了客人,哪间屋子客人退房了,客人退房后,房间有没有清扫过,这些都需要去记录,以 ...
- 手摸手教你在vue-cli里面使用vuex,以及vuex简介
写在前面: 这篇文章是在vue-cli里面使用vuex的一个极简demo,附带一些vuex的简单介绍.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 本文首发于我的个人 ...
- vuex基础(vuex基本结构与调用)
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const modulesA = { state:{//状态 count: ...
- vuex教程,vuex使用介绍案例
1.demopageaction: import Vue from "vue"; import Store from "../../store.js"; imp ...
- vuex介绍--一篇看懂vuejs的状态管理神器
原文,请点击此链接http://www.ituring.com.cn/article/273487
- Linux--网络基础(概念+协议的了解+OSI七层模型,TCP/IP五层协议,网络数据传输流程)
网络的发展 网络的发展有下面几个阶段: 独立模式:计算机最开始是以单机模式被广泛使用的.每一台计算机都是独立的,之间不能够进行数据共享与通信 网络互联: 计算机之间可以链接在一起,完成数据共享,计算机 ...
- 个人介绍和Github使用流程
我叫石莉静,来自网络工程143班,学号1413042067 我的兴趣爱好有看电影.动漫,听音乐,摄影,寻找美食等等. 个人编程能力:非常真诚的说,我的编程能力蛮差的,用C++写过一共写过...(很少很 ...
随机推荐
- sh_05_非公勿入
sh_05_非公勿入 # 练习3: 定义一个布尔型变量 is_employee,编写代码判断是否是本公司员工 is_employee = False # 如果不是提示不允许入内 # 在开发中,通常希望 ...
- POJ 3260 The Fewest Coins(完全背包+多重背包=混合背包)
题目代号:POJ 3260 题目链接:http://poj.org/problem?id=3260 The Fewest Coins Time Limit: 2000MS Memory Limit: ...
- druid监控每个服务数据库连接数和SQL执行效率
1.下载druid 2.将刚刚下载的druid放入tomcat下的lib目录 3.配置要监控的服务启动文件,添加: -Dcom.sun.management.jmxremote.port=4090 - ...
- 二次封装axios,根据参数来实现多个请求多次拦截
1. 新建 axiosTool.js 文件,设置请求拦截和处理的逻辑 import Vue from 'vue' import axios from 'axios' //取消请求 let Cancel ...
- spring-servlet.xml
<?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...
- 第五周总结&实验报告三
第五周总结&实验报告三 实验报告 1.已知字符串:"this is a test of java".按要求执行以下操作:(要求源代码.结果截图.) ① 统计该字符串中字母s ...
- sqlite的系统表sqlite_master
SQLite数据库中一个特殊的名叫 SQLITE_MASTER 上执行一个SELECT查询以获得所有表的索引.每一个 SQLite 数据库都有一个叫 SQLITE_MASTER 的表, 它定义数据 ...
- Android NDK的生命周期JNI_OnLoad与JNI_OnUnload(转)
摘要 NDK的生命周期 //当动态库被加载时这个函数被系统调用 JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *reserved) { LOGI ...
- 修改web项目发布路径
Eclipse中用Tomcat发布的Web项目,更改其部署路径 我的Eclipse的工作目录是D:/workspace先配置Tomcat 选择你的tomcat版本 点击next 这里先不要把项目添加进 ...
- 十九、RF接口测试汇总(一)
搭建项目:转自 http://chuansong.me/n/1858477 A.请求方式为get请求 方式一:导入RequestsLibrary库,get request [ alias | ...