zoukankan      html  css  js  c++  java
  • 浅谈vuex。

    一、什么是Vuex

      公共状态(公用的一些属性)管理,还可以解决组件传值的一些复杂问题。例:地理定位

      1只有各个组件公用的一些数据会放在Vuex当中。 但并不是所有的公用的数据都要放在Vuex中。

      2 Vuex是一个公共状态管理模式,并不是数据库,所以不可能持久保存一些数据,当用户刷新浏览器的时候那么数据就有可能消失。

      3 Vuex主要应用在大型的单页面开发中

    二、Vuex数据传递的流程:

      1通过new Vuex.Store()创建一个store仓库,因为将store挂载在了vue的实例身上,所以this中就有store

      2 在组件内部通过this.$store.state.属性   来调用公共状态中的statestate是存储公共的状态

      3 当组件需要修改数据的时候,必须遵循单向数据流,通过this.$store.dispatch来触发actions中的方法,直接写函数名就可以了。;

      4当触发之后, actions(配置项中都是函数)中的每个方法都会接收一个对象(参数),这个对象里面有一个commit方法,作用就是用来触发mutations里面的方法。

      5 mutations里面的方法用来修改state中的数据,mutations里面的方法都会接受到2个参数,一个是store中的state,另一个是需要传递的参数。

      6 mutations中的方法执行完毕后state会发生改变 ,因为vuex的数据是响应式的,所以组件的状态也会发生改变

     

    三、Vuex5个属性的作用:

      1state

      用来存储公共的状态,在state中的数据都是响应式的。

      辅助函数mapState;

      在computed属性中来jieshoustate中的数据;将组件中的9

      computed:Vue.mapState(["属性"]) computed:Vuex.mapState({    key:state=>state.inputeVal })

      如果自身组件也需要使用computed的话:

      computed:{    ...Vuex.mapState({    key:state=>state.inputeVal    }) }    

      2 actions

      actions里面的函数主要用来处理异步的函数以及一些业务逻辑,每一个函数里面都有一个形参,这个形参是一个对象,里面有一个commit方法,这个方法用来触发mutations里面的方法。

      辅助函数mapActions

      只能在methods中使用;

      methods:Vuex.mapActions(["属性名"]); methods:Vuex.mapActions({    自定义名:"函数",    自定义名:"函数"    })

      3 mutations

      mutations里面的函数主要用来修改state中的数据,mutations里面的所有方法都会有2个参数,一个是store中的state,另外一个是需要传递的参数。

      辅助函数mapMutations

      4 getters

      相当于组件中的computed,计算属性,同时也是监听属性的变化,当state中的属性发生改变的时候,就会触发getters里面的方法,getters里面的每一个方法中都会有一个参数state

      使用方式:

      this.$store.getters.方法名称..不加括号;

      辅助函数mapGetters

      mapGetters使用在组件的computed

      Vue.mapGetters(["方法名称"]) Vuex.mapGetters({    key:val      //val就是getters中的函数名称 })

      5 modules  模块

      将公共的状态按照模块进行划分

      1每个模块都相当于一个小型的Vuex

      2每个模块里面都会有state getters actions mutations

      3在导出模块的时候添加一个 namespaced : true

       主要作用就是让自己的当前子一个模块都有自己的独立的空间。

      如何使用辅助函数:

      1在当前组件中首先需要引入vueximport Vuex from "vuex"

      2通过Vuex来调用辅助函数;

  • 相关阅读:
    大熊君JavaScript插件化开发------(第二季)
    大熊君JavaScript插件化开发------(第一季)
    大熊君大话NodeJS之------基于Connect中间件的小应用(Bigbear记事本应用之第一篇)
    大熊君大话NodeJS之 ------ Connect中间件第二季(源码分析)
    大熊君大话NodeJS之------Connect中间件模块(第一季)
    大熊君大话NodeJS之------MongoDB模块(额外篇)
    大熊君大话NodeJS之------(Url,QueryString,Path)模块
    The SSL certificate used to load resources from xxx will be distrusted in M70.
    理解ios 11中webview的视口
    谨慎升级到HTTPS
  • 原文地址:https://www.cnblogs.com/PrayLs/p/10466787.html
Copyright © 2011-2022 走看看