Vuex

作者: 简柏 | 来源:发表于2019-05-14 22:03 被阅读0次

    安装Vuex

    cnpm install vuex --save-dev

    Vuex是什么?

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

    这是[Vuex的官网]([图片上传失败...(image-540e44-1557842488185)]

    https://vuex.vuejs.org/)。对于Vuex的解释可以看下。

    怎么去用Vuex?

       vuex就像一个无形的仓库,公共的状态我们会抽离出来放进里面。vuex的核心主要包括以下几个部分:
       *state
       *getters
       *mutations 
       *actions
        state里面就是存放的我们上面所提到的状态
        mutations就是存放如何更改状态
        getters就是从state中派生出状态,比如将state中的某个状态进行过滤然后获取新的状态  
         actions就是mutation的加强版,它可以通过commit mutations中的方法来改变状态,最重要的是它可以进行异步操作。
    
    我们在项目的src目录下新建一个store,在该目录下新建一个index.js文件,在这个文件中创建实例,导入实例对象文件,最后使用export default 导出文件。

    [图片上传失败...(image-bdfbf8-1557842505546)]]

    C:\Users\admin\Desktop/index.php
    imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    实例getters对象,实时监控state值的变化,最后导出文件

    [图片上传失败...(image-32c4e-1557842505546)]]

    https://img.haomeiwen.com/i17870438/1441bcaaa790605d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    实例mutations对象,最后导出文件。(不能执行异步操作)

    [图片上传失败...(image-38d7f3-1557842505546)]]

    https://img.haomeiwen.com/i17870438/5c52bd1094d876ab.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    实例actions对象,最后导出文件。(可以进行异步操作)

    [图片上传失败...(image-ea3c37-1557842505546)]]

    https://img.haomeiwen.com/i17870438/6fae5096004d058b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

    新手别喷(我,皮痒,求锤)

    相关文章

      网友评论

          本文标题:Vuex

          本文链接:https://www.haomeiwen.com/subject/gydyaqtx.html