• 技术文章 >web前端 >Vue.js

    vuejs怎么实现全局状态管理

    青灯夜游青灯夜游2021-09-08 13:53:10原创113

    在vuejs中可以利用vuex实现全局状态管理;Vuex是一个专为Vue.js应用程序开发的状态管理模式,可以用来管理全局数据,可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。

    本教程操作环境:windows7系统、vue2.9.6版,DELL G3电脑。

    vuex全局状态管理

    Vuex 是一个专为Vue.js 应用程序开发的状态管理模式。可以管理复杂应用的数据状态,比如兄弟组件的通信、多层嵌套的组件的传值等等。

    通俗的来说vuex就是全局数据管理,用来管理全局数据的,vue原本的数据管理只能父子组件之间传递数据,并且不方便,使用vuex可以进行全局数据管理,将所有数据存储到vuex中,使用时调用。

    vuex的核心:

    Vuex的用法

    安装并使用vuex

    安装

    1.在项目中进行安装

    npm install vuex --save

    2.新建一个store.js文件

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state: {
          //存放初始数据
        count: 0
      },
      mutations: {
          //存放修改数据的方法
        increment (state) {
          state.count++
        }
      }
    })

    使用数据

    方法一:使用$store调用

    在组件中直接使用this.$store.state调用数据

    this.$store.state.数据名

    方法二:导入mapState,在组件中将数据展开映射,需要写到计算属性中,使用的时候直接写 count就行

    //先导入mapState
    import {mapState} from 'vuex'
    
    computed:[
        ...mapState(['count'])
    ]

    在对数据进行操作时,不能直接调用state的数据,如果要修改数据,需要在mutation里写方法,目的就是方便查找哪里除了问题

    Mutations的作用与使用方法

    mutations里面就是写对数据进行操作的方法的

      mutations: {
    //存放修改数据的方法
       add(state) {
         state.count++
       }
     }

    使用方式一:

    触发mutations函数,使用commit调用里面的方法名

    this.$store.commit这是触发mutation的第一种方式

    methods:{
       handle(){
           this.$store.commit('add')
       }
    }

    mutations传参mutation的方法里可以传递两个参数,第一个就是state,第二个是自定义的参数payload

      mutations: {
    //存放修改数据的方法
       addN(state,N) {
         state.count+=N
       }
     }

    调用是在组件的方法里

    methods:{
       handle2(){
           //触发mutation并传参
           this.$store.commit('addN',4)
       }
    }

    使用方法二

    在组件中导入vuex里的mapMutations函数

    mapMutations(['sub'])是对里面的方法与store里的方法进行映射

    ...是展开操作符

    import {mapMutations} from 'vuex'
    
    methods:{
       //将方法名写在[]里  ['addN','sub']
       ...mapMutations(['sub'])
       btnhandle(){
           //调用时直接写this.方法名
           this.sub()
           //当传入参数时,直接写这个参数,不需要写state
           this.addN(4)
       }
    }

    注意:在Mutation函数里不能写异步代码;比如写定时函数,虽然页面会改变,但是实际状态数值不会变。于是就有了actions

    Actions的用法

    Action用于处理异步任务。

    如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发Mutation的方式间接变更数据.

    在store里与mutations同级写一个actions:{ } 在它里面调用mutations的方法,然后在组件中触 发Actions

      mutations: {
      //存放修改数据的方法
        add(state) {
          state.count++
        }
      },
      actions:{
          //context是上下文
          addAsync(context){
              setTimeout(()=>{
                  //调用add方法,actions中不能直接修改state中的数据,只有mutation有这个权力
                  context.commit('add')
              })
          }
      }

    使用actions要在组件中使用dispatch进行触发

    btnHandle(){
        //dispatch专门触发action
        this.$store.dispatch('addAsync')
    }

    actions传递参数

    在store的actions里和mutations都要写形参

      mutations: {
      //传参
        addN(state,n) {
          state.count+=n
        }
      },
      actions:{
          //context是上下文
          addAsync(context,n){
              setTimeout(()=>{
                  //调用add方法,并传参
                  context.commit('addN',n)
              })
          }
      }

    在组件中写实参

    btnHandle(){
        //dispatch专门触发action,并传入参数
        this.$store.dispatch('addAsync',5)
    }

    第二种是展开并映射引入mapActions

    //引入方法
    import {mapActions} from 'vuex
    
    methods:{
        //映射actions
        ...mapActions(['addAsync'])
        btnhandle(){
            //调用对应的actions
            this.addAsync()
        }
    }
    //也可以不写btnhandle方法了直接将映射的方法名写在点击操作上

    注意:在组件中调用actions方法,在actions中使用commit调用mutations方法

    getters

    state:{
       count:0
    },
    getters:{
       showNum(state){
           return '当前最新的数据是:'+state.count
       }
    }

    第一种调用方式:this.$store.getters.方法名

    this.$store.getters.showNum

    第二种调用方式:映射展开,在computed中映射

    import {mapGetters} from 'vuex'
    
    computed:{
       ...mapGetters(['showNum'])
    }

    总结

    相关推荐:《vue.js教程

    以上就是vuejs怎么实现全局状态管理的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    上一篇:怎么在idea创建vuejs项目 下一篇:vuejs传递数据的方法有哪些
    线上培训班

    相关文章推荐

    • vuex中store的使用介绍(附实例)• Vue.js状态管理模式Vuex的安装与使用(代码示例)• Vue基于vuex和axios实现加载效果以及axios的安装配置• 在Vuex中Mutations修改状态操作下详解• vue中如何监听vuex中的数据变化

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网