vuejs如何实现全局状态管理

这篇文章给大家分享的是有关vuejs如何实现全局状态管理的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

在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就行

//先导入mapStateimport {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 'vuexmethods:{    //映射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'])}

感谢各位的阅读！关于"vuejs如何实现全局状态管理"这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！