1、什么是vuex?
    公共状态管理;解决多个非父子组件传值麻烦的问题;简单说就是多个页面都能用Vuex中store公共的数据
    a、并不是所有的数据都要放在Vuex中,只有各个组件公用的一些数据会放在Vuex当中
    b、Vuex是一个公共状态管理模式 并不是数据库 所以不可能持久保存一些数据
      当用户刷新浏览器的时候那么数据就有可能消失
    c、Vuex主要应用在大型的单页面开发中
2、vuex的特点
    1、遵循单向数据流
    2、Vuex中的数据是响应式的 
3、vuex的流程图:
  
4、vuex的具体使用:
    一、 使用vuex:
      1、安装: yarn add vuex
      2、使用插件(创建仓库): 存放所有组件内的数据(传的值)
          新建index.js: 
          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;
      3、将仓库挂载到vue的实例身上:
 

 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数据传输流程

    1、通过new Vuex.Store()创建一个仓库 state是公共的状态,state--->components渲染页面
    2、在组件内部通过this.$store.state.属性 来调用公共状态中的state,进行页面的渲染。
    3、当组件需要修改数据的时候,必须遵循单向数据流。通过this.$store.dispatch来触发actions中的方法
    4、actions中的每个方法都会接受一个对象 这个对象里面有一个commit方法,用来触发mutations里面的方法
    5、mutations里面的方法用来修改state中的数据 mutations里面的方法都会接收到2个参数 一个是store中的state
      另外一个是需要传递到参数
    6、当mutations中的方法执行完毕后state会发生改变,因为vuex的数据是响应式的 所以组件的状态也会发生改变

vuex介绍和vuex数据传输流程的更多相关文章

  1. vue2.0 axios封装、vuex介绍

    一.前言 博主也是vue道路上的行者,道行不深,希望自己的东西能对大家有所帮助.这篇博客针对 了解过vue基础,但是没有做过vue项目的童鞋.如果想看基础指令,可以看我之前的一篇博客,请点击  跳转, ...

  2. vuex介绍

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 也集成到 Vue 的官方调试工具 ...

  3. vuex 介绍

    vuex是为vue.js开发的状态管理模式,负责vue的状态管理,状态管理是干啥的呢,举个栗子,比如一个酒店,哪间屋子入住了客人,哪间屋子客人退房了,客人退房后,房间有没有清扫过,这些都需要去记录,以 ...

  4. 手摸手教你在vue-cli里面使用vuex,以及vuex简介

    写在前面: 这篇文章是在vue-cli里面使用vuex的一个极简demo,附带一些vuex的简单介绍.有需要的朋友可以做一下参考,喜欢的可以点波赞,或者关注一下,希望可以帮到大家. 本文首发于我的个人 ...

  5. vuex基础(vuex基本结构与调用)

    import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const modulesA = { state:{//状态 count: ...

  6. vuex教程,vuex使用介绍案例

    1.demopageaction: import Vue from "vue"; import Store from "../../store.js"; imp ...

  7. vuex介绍--一篇看懂vuejs的状态管理神器

    原文,请点击此链接http://www.ituring.com.cn/article/273487

  8. Linux--网络基础(概念+协议的了解+OSI七层模型,TCP/IP五层协议,网络数据传输流程)

    网络的发展 网络的发展有下面几个阶段: 独立模式:计算机最开始是以单机模式被广泛使用的.每一台计算机都是独立的,之间不能够进行数据共享与通信 网络互联: 计算机之间可以链接在一起,完成数据共享,计算机 ...

  9. 个人介绍和Github使用流程

    我叫石莉静,来自网络工程143班,学号1413042067 我的兴趣爱好有看电影.动漫,听音乐,摄影,寻找美食等等. 个人编程能力:非常真诚的说,我的编程能力蛮差的,用C++写过一共写过...(很少很 ...

随机推荐

  1. sh_05_非公勿入

    sh_05_非公勿入 # 练习3: 定义一个布尔型变量 is_employee,编写代码判断是否是本公司员工 is_employee = False # 如果不是提示不允许入内 # 在开发中,通常希望 ...

  2. POJ 3260 The Fewest Coins(完全背包+多重背包=混合背包)

    题目代号:POJ 3260 题目链接:http://poj.org/problem?id=3260 The Fewest Coins Time Limit: 2000MS Memory Limit: ...

  3. druid监控每个服务数据库连接数和SQL执行效率

    1.下载druid 2.将刚刚下载的druid放入tomcat下的lib目录 3.配置要监控的服务启动文件,添加: -Dcom.sun.management.jmxremote.port=4090 - ...

  4. 二次封装axios,根据参数来实现多个请求多次拦截

    1. 新建 axiosTool.js 文件,设置请求拦截和处理的逻辑 import Vue from 'vue' import axios from 'axios' //取消请求 let Cancel ...

  5. spring-servlet.xml

    <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.sp ...

  6. 第五周总结&实验报告三

    第五周总结&实验报告三 实验报告 1.已知字符串:"this is a test of java".按要求执行以下操作:(要求源代码.结果截图.) ① 统计该字符串中字母s ...

  7. sqlite的系统表sqlite_master

      SQLite数据库中一个特殊的名叫 SQLITE_MASTER 上执行一个SELECT查询以获得所有表的索引.每一个 SQLite 数据库都有一个叫 SQLITE_MASTER 的表, 它定义数据 ...

  8. Android NDK的生命周期JNI_OnLoad与JNI_OnUnload(转)

    摘要 NDK的生命周期 //当动态库被加载时这个函数被系统调用 JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *reserved) { LOGI ...

  9. 修改web项目发布路径

    Eclipse中用Tomcat发布的Web项目,更改其部署路径 我的Eclipse的工作目录是D:/workspace先配置Tomcat 选择你的tomcat版本 点击next 这里先不要把项目添加进 ...

  10. 十九、RF接口测试汇总(一)

    搭建项目:转自  http://chuansong.me/n/1858477 A.请求方式为get请求 方式一:导入RequestsLibrary库,get request    [ alias | ...