首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

vue--vuex详解

Posted in Javascript onApril 15, 2019

Vuex

什么是Vuex？

官方说法：Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

个人理解：Vuex是用来管理组件之间通信的一个插件

为什么要用Vuex？

我们知道组件之间是独立的，组件之间想要实现通信，我目前知道的就只有props选项，但这也仅限于父组件和子组件之间的通信。如果兄弟组件之间想要实现通信呢？嗯..，方法应该有。抛开怎么实现的问题，试想一下，当做中大型项目时，面对一大堆组件之间的通信，还有一大堆的逻辑代码，会不会很抓狂？？那为何不把组件之间共享的数据给“拎”出来，在一定的规则下管理这些数据呢？ 这就是Vuex的基本思想了。

Vuex有什么特性？

怎么使用Vuex？

引入Vuex.js文件

创建实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
  <div id="app">
    
  </div>
</body>
<script>
  Vue.use(Vuex);//在创建Vue实例之前
  var myStore = new Vuex.Store({
    state:{
      //存放组件之间共享的数据
      name:"jjk"
    },
     mutations:{
       //显式的更改state里的数据
     },
     getters:{
       //获取数据的方法
     },
     actions:{
       //
     }
  });
  new Vue({
    el:"#app",
    data:{
      name:"dk"
    },
    store:myStore,
    mounted:function(){
      console.log(this)//控制台
    }
  })
</script>
</html>

先解释上面代码的意思：

new Vuex.Store({}) 表示创建一个Vuex实例，通常情况下，他需要注入到Vue实例里. Store是Vuex的一个核心方法，字面上理解为“仓库”的意思。Vuex Store是响应式的，当Vue组件从store中读取状态（state选项）时，若store中的状态发生更新时，他会及时的响应给其他的组件（类似双向数据绑定） 而且不能直接改变store的状态，改变状态的唯一方法就是，显式地提交更改（mutations选项）

他有4个核心选项：state mutations getters actions （下文会仔细分析）

这是上面代码：

vue--vuex详解

那如何获取到state的数据呢？

一般会在组件的计算属性（computed）获取state的数据（因为，计算属性会监控数据变化，一旦发生改变就会响应）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
  <div id="app">
    <hello></hello>
  </div>
</body>
<script>
  Vue.use(Vuex);
  var myStore = new Vuex.Store({
    state:{
      //存放组件之间共享的数据
      name:"jjk"
    },
     mutations:{
       //显式的更改state里的数据
     },
     getters:{
       //过滤state数据
     },
     actions:{
       //
     }
  });

  Vue.component('hello',{
    template:"<p>{{name}}</p>",
    computed: {
      name:function(){
        return this.$store.state.name
      }
    },
     mounted:function(){
      console.log(this)
    }
  })
  new Vue({
    el:"#app",
    data:{
      name:"dk"
    },
    store:myStore,
    mounted:function(){
      console.log(this)
    }
  })
</script>
</html>

在·chrome中显示：

vue--vuex详解

state：用来存放组件之间共享的数据。他跟组件的data选项类似，只不过data选项是用来存放组件的私有数据。

getters：有时候，我们需要对state的数据进行筛选，过滤。这些操作都是在组件的计算属性进行的。如果多个组件需要用到筛选后的数据，那我们就必须到处重复写该计算属性函数；或者将其提取到一个公共的工具函数中，并将公共函数多处导入 - 两者都不太理想。如果把数据筛选完在传到计算属性里就不用那么麻烦了，getters就是干这个的，你可以把getters看成是store的计算属性。getters下的函数接收接收state作为第一个参数。那么，组件是如何获取经过getters过滤的数据呢？ 过滤的数据会存放到$store.getters对象中。具体看一个例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
  <div id="app">
    <hello></hello>
  </div>
</body>
<script>
  Vue.use(Vuex);
  var myStore = new Vuex.Store({
    state:{
      //存放组件之间共享的数据
      name:"jjk",
      age:18
    },
     mutations:{
       //显式的更改state里的数据
     },
     getters:{
       getAge:function(state){
         return state.age;
       }
     },
     actions:{
       //
     }
  });

  Vue.component('hello',{
    template:"<p>姓名：{{name}} 年龄：{{age}}</p>",
    computed: {
      name:function(){
        return this.$store.state.name
      },
      age:function(){
        return this.$store.getters.getAge
      }
    },
     mounted:function(){
      console.log(this)
    }
  })
  new Vue({
    el:"#app",
    data:{
      name:"dk"
    },
    store:myStore,
    mounted:function(){
      console.log(this)
    }
  })
</script>
</html>

在chrome中显示：

vue--vuex详解　

mutations：前面讲到的都是如何获取state的数据，那如何把数据存储到state中呢？在 Vuex store 中，实际改变 状态(state) 的唯一方式是通过 提交(commit) 一个 mutation。

mutations下的函数接收state作为参数，接收一个叫做payload（载荷）的东东作为第二个参数，这个东东是用来记录开发者使用该函数的一些信息，比如说提交了什么，提交的东西是用来干什么的，包含多个字段，所以载荷一般是对象（其实这个东西跟git的commit很类似）还有一点需要注意：mutations方法必须是同步方法！

具体看实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
  <div id="app">
    <hello></hello>
  </div>
</body>
<script>
  Vue.use(Vuex);
  var myStore = new Vuex.Store({
    state:{
      //存放组件之间共享的数据
      name:"jjk",
      age:18,
      num:1
    },
     mutations:{
       //显式的更改state里的数据
       change:function(state,a){
        // state.num++;
        console.log(state.num += a); 
        
       }
     },
     getters:{
       getAge:function(state){
         return state.age;
       }
     },
     actions:{
       //
     }
  });

  Vue.component('hello',{
    template:"<p @click='changeNum'>姓名：{{name}} 年龄：{{age}} 次数：{{num}}</p>",
    computed: {
      name:function(){
        return this.$store.state.name
      },
      age:function(){
        return this.$store.getters.getAge
      },
      num:function(){
        return this.$store.state.num
      }
    },
     mounted:function(){
      console.log(this)
    },
    methods: {
      changeNum: function(){
        //在组件里提交
        // this.num++;
        this.$store.commit('change',10)
      }
    },
    data:function(){
      return {
        // num:5
      }
    }
  })
  new Vue({
    el:"#app",
    data:{
      name:"dk"
    },
    store:myStore,
    mounted:function(){
      console.log(this)
    }
  })
</script>
</html>

当点击p标签前，chrome中显示：

vue--vuex详解

点击p标签后：

vue--vuex详解

可以看出：更改state的数据并显示在组件中，有几个步骤：1. 在mutations选项里，注册函数 函数里面装逻辑代码。2.在组件里，this.$store.commit('change',payload) 注意：提交的函数名要一一对应 3.触发函数，state就会相应更改 4.在组件的计算属性里this.$store.state 获取你想要得到的数据

actions：既然mutations只能处理同步函数，我大js全靠‘异步回调'吃饭，怎么能没有异步，于是actions出现了...

actions和mutations的区别

1.Actions提交的是 mutations，而不是直接变更状态。也就是说，actions会通过mutations，让mutations帮他提交数据的变更。

2.Action 可以包含任意异步操作。ajax、setTimeout、setInterval不在话下

　

再来看一下实例：

　

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<script src="./js/vuex.js"></script>
<script src="./js/vue2.0.js"></script>
<body>
  <div id="app">
    <hello></hello>
  </div>
</body>
<script>
  Vue.use(Vuex);
  var myStore = new Vuex.Store({
    state:{
      //存放组件之间共享的数据
      name:"jjk",
      age:18,
      num:1
    },
     mutations:{
       //显式的更改state里的数据
       change:function(state,a){
        // state.num++;
        console.log(state.num += a); 
        
       },
       changeAsync:function(state,a){
         console.log(state.num +=a);
       }
     },
     getters:{
       getAge:function(state){
         return state.age;
       }
     },
     actions:{



//设置延时
       add:function(context,value){
         setTimeout(function(){





　//提交事件
          context.commit('changeAsync',value);
         },1000)
         
       }
     }
  });

  Vue.component('hello',{
    template:`
        <div>
          <p @click='changeNum'>姓名：{{name}} 年龄：{{age}} 次数：{{num}}</p>
          <button @click='changeNumAnsyc'>change</button>
        </div>`,
    computed: {
      name:function(){
        return this.$store.state.name
      },
      age:function(){
        return this.$store.getters.getAge
      },
      num:function(){
        return this.$store.state.num
      }
    },
     mounted:function(){
      console.log(this)
    },
    methods: {
      changeNum: function(){
        //在组件里提交
        // this.num++;
        this.$store.commit('change',10)
      },




//在组件里派发事件 当点击按钮时，changeNumAnsyc触发-->actions里的add函数被触发-->mutations里的changeAsync函数触发


      changeNumAnsyc:function(){
        this.$store.dispatch('add', 5);
      }
    },
    data:function(){
      return {
        // num:5
      }
    }
  })
  new Vue({
    el:"#app",
    data:{
      name:"dk"
    },
    store:myStore,
    mounted:function(){
      console.log(this)
    }
  })
</script>
</html>

点击按钮一秒后，chrome中显示：

vue--vuex详解

先整明白 context dispatch是什么东西：

context：context是与 store 实例具有相同方法和属性的对象。可以通过context.state和context.getters来获取 state 和 getters。

dispatch：翻译为‘派发、派遣'的意思，触发事件时，dispatch就会通知actions（跟commit一样一样的）参数跟commit也是一样的。

action的大体流程：

1.在actions选项里添加函数（异步）并提交到对应的函数（在mutation选项里）中context.commit('changeAsync',value);

　

actions:{
       add:function(context,value){
         setTimeout(function(){
          context.commit('changeAsync',value);
         },1000)
         
       }
     }

2.在组件里：changeNumAnsyc:function(){this.$store.dispatch('add', 5);} 将dispatch“指向”actions选项里的函数

3.　在mutations选项里，要有对应的函数changeAsync:function(state,a){console.log(state.num +=a);}

总结：

各个类型的 API各司其职，mutation 只管存，你给我（dispatch）我就存；action只管中间处理，处理完我就给你，你怎么存我不管；Getter 我只管取，我不改的。　action放在了 methods 里面，说明我们应该把它当成函数来用（讲道理，钩子函数也应该可以的） mutation是写在store里面的，这说明，它就是个半成品，中间量，我们不应该在外面去操作它。getter写在了 computed 里面，这说明虽然 getter我们写的是函数，但是我们应该把它当成计算属性来用。

对Vuex的了解就先到这了，细节以后在补充。。。。。待续

以上所述是小编给大家介绍的vue--vuex详解整合，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

vue--vuex详解

- Author -

游鱼与渔

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
xss文件页面内容读取(解决)
Nov 28 Javascript
Safari5中alert的无限循环BUG
Apr 07 Javascript
jQuery $.data()方法使用注意细节
Dec 31 Javascript
基于jQuery+PHP+Mysql实现在线拍照和在线浏览照片
Sep 06 Javascript
AngularJS手动表单验证
Feb 01 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
分分钟玩转Vue.js组件（二）
Mar 01 Javascript
js和jquery中获取非行间样式
May 05 jQuery
JS+HTML实现的圆形可点击区域示例【3种方法】
Aug 01 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
May 09 Javascript
微信小程序云函数添加数据到数据库的方法
Mar 04 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 #Javascript
小程序数据通信方法大全(推荐)
Apr 15 #Javascript
前端面试知识点目录一览
Apr 15 #Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 #Javascript
vue-cli项目使用mock数据的方法（借助express）
Apr 15 #Javascript
说说Vuex的getters属性的具体用法
Apr 15 #Javascript
vue 中Virtual Dom被创建的方法
Apr 15 #Javascript
汇报材料(247) 开幕词(63) 计划(88) 通知(159) 慰问信(53) 导游词(322) 观后感(479) 闭幕词(9) 实用文书(952) 工作总结(1972)
You might like
cache_lite试用
2007/02/14 PHP
php中apc缓存使用示例
2013/12/25 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
详谈phpAdmin修改密码后拒绝访问的问题
2017/04/03 PHP
锋利的jQuery 要点归纳（三） jQuery中的事件和动画（下：动画篇）
2010/03/24 Javascript
用js实现table单元格高宽调整,兼容合并单元格(兼容IE6、7、8、FF)实例
2013/06/25 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
jquery中获取元素里某一特定子元素的代码
2014/12/02 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
JavaScript实现经典排序算法之冒泡排序
2016/12/28 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
微信小程序3种位置API的使用方法详解
2019/08/05 Javascript
jQuery实现消息弹出框效果
2019/12/10 jQuery
Element实现表格嵌套、多个表格共用一个表头的方法
2020/05/09 Javascript
vue element-ul实现展开和收起功能的实例代码
2020/11/25 Vue.js
django 外键model的互相读取方法
2018/12/15 Python
Python实现图片批量加入水印代码实例
2019/11/30 Python
ansible-playbook实现自动部署KVM及安装python3的详细教程
2020/05/11 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Django crontab定时任务模块操作方法解析
2020/09/10 Python
基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享
2014/06/11 HTML / CSS
html5 canvas里绘制椭圆并保持线条粗细均匀的技巧
2013/03/25 HTML / CSS
全球性的在线鞋类品牌：Public Desire
2019/04/03 全球购物
Java程序开发中如何应用线程
2016/03/03 面试题
艺术专业大学生自我评价
2013/09/22 职场文书
本科毕业生求职自荐信
2014/02/03 职场文书
新兵入伍心得体会
2014/09/04 职场文书
公司授权委托书样本
2014/09/15 职场文书
四风问题党员个人整改措施
2014/10/27 职场文书
2015个人半年总结范文
2015/03/09 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
告知书格式
2015/07/01 职场文书
Nest.js参数校验和自定义返回数据格式详解
2021/03/29 Javascript
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL