首页 >web前端 >Vue.js > 正文

vuejs怎么实现全局状态管理

原创2021-09-08 13:53:100624

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

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

vuex全局状态管理

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

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

vuex的核心:

  • state
  • mutations
  • actions
  • getter

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

  • Getter用于对Store中的数据进行加工处理形成新的数据。不会修改原数据
  • Getter可以对Store中已有的数据加工处理之后形成新的数据,类似Vue的计算属性。
  • Store中数据发生变化,Getter的数据也会跟着变化.
state:{
   count:0
},
getters:{
   showNum(state){
       return '当前最新的数据是:'+state.count
   }
}

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

this.$store.getters.showNum

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

import {mapGetters} from 'vuex'

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

总结

  • state是存放初始数据,进行数据初始化的,最好不要在组件里直接调用state
  • mutations里面是存储对数据进行操作的方法,但是不能进行异步操作
  • actions里面是进行异步操作的方法
  • getters用于对Store中的数据进行加工处理形成新的数据

相关推荐:《vue.js教程

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

php中文网最新课程二维码

声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理

相关文章

相关视频


网友评论

文明上网理性发言,请遵守 新闻评论服务协议

我要评论
  • 专题推荐

    作者信息
    推荐视频教程
  • Vuex参考手册Vuex参考手册
  • vue 3.0全新实战课程(2021版)第一季vue 3.0全新实战课程(2021版)第一季
  • vue 3.0全新实战课程(2021版)第二季vue 3.0全新实战课程(2021版)第二季
  • VuePress: 30分钟制作一个Vue静态网站VuePress: 30分钟制作一个Vue静态网站
  • VuePress: Vue 官方静态网站生成器极速指南VuePress: Vue 官方静态网站生成器极速指南
  • 视频教程分类