本教程操作环境：windows7系统、vue2.9.6版，dell g3电脑。
vuex全局状态管理vuex 是一个专为vue.js 应用程序开发的状态管理模式。可以管理复杂应用的数据状态，比如兄弟组件的通信、多层嵌套的组件的传值等等。
通俗的来说vuex就是全局数据管理，用来管理全局数据的，vue原本的数据管理只能父子组件之间传递数据，并且不方便，使用vuex可以进行全局数据管理，将所有数据存储到vuex中，使用时调用。
vuex的核心：
statemutationsactionsgettervuex的用法安装并使用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'])}
总结state是存放初始数据，进行数据初始化的，最好不要在组件里直接调用statemutations里面是存储对数据进行操作的方法，但是不能进行异步操作actions里面是进行异步操作的方法getters用于对store中的数据进行加工处理形成新的数据相关推荐：《vue.js教程》
以上就是vuejs怎么实现全局状态管理的详细内容。