本文共 3003 字，大约阅读时间需要 10 分钟。

Vuex的状态管理

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

就是一个加强版的data！ 在单页应用中会有一个data函数，管理当前应用的状态。 处理大量的需要在组件间传递的数据，直接定义一个全局的data属性保存就行了。 如果我们的页面比较简单，切记千万不要没事找事引入Vuex，我们使用Vuex是因为项目变得复杂之后，有很多数据需要在父组件、子组件和孙组件之间传递，处理起来很繁琐，于是就需要Vuex这样一个可以对这一部分数据进行统一管理的东西，也是响应式

什么情况需要使用Vuex管理状态在多个组件间共享？

大型项目中组件很多，多个组件中共用的数据 例如：用户的登录状态、用户名称、头像、地理位置信息等 例如：商品的收藏、购物车中的物品。 例如：传递组件之间传递层次太多、不相关组件、公用组件

Vuex有点类似cookie和session，session是用于服务器端共享，cookie是用于浏览器的，Vuex是用于前端组件间共享

文件目录

helloword子组件使用Home组件声明的变量，可采用之前学习的组件传递值的方法

Home组件

helloword子组件

效果

若About组件想要使用Home组件的count，通过组件传递的方式也可实现，就是有点麻烦，需要传递给中介App组件，App组件再传递给About组件。 因此，在这里可采用Vuex，其配置文件在/store/index.js

import {
    createStore } from 'vuex'export default createStore({
     state: {
       //任何地方都可使用这个状态管理    num: 0  },  mutations: {
     },  actions: {
     },  modules: {
     }})

Home.vue

About.vue

效果

Vuex最好采用Matuations来修改状态，而不是通过组件的形式 index.js

import {
    createStore } from 'vuex'export default createStore({
     state: {
       //任何地方都可使用这个状态管理    num: 0,    mnum: 0  },  mutations: {
       //自动把state的参数传过来    sub(state) {
         state.mnum--;    },    add(state) {
         state.mnum++;    }  },  actions: {
     },  modules: {
     }})

Home.vue

About.vue

效果

Mutations带参数传递修改状态 index.js

import {
    createStore } from 'vuex'export default createStore({
     state: {
       //任何地方都可使用这个状态管理    num: 0,    mnum: 0  },  mutations: {
       //自动把state的参数传过来    sub(state) {
         state.mnum--;    },    add(state) {
         state.mnum++;    },    //接收一个参数    sub2(state,count) {
         console.log(count);      state.mnum-=count;    },    add2(state,count) {
         console.log(count);      state.mnum+=count;    },    //接收多个参数    sub3(state,payload) {
         console.log(payload);      state.mnum-=(payload.count+payload.num);    },    add3(state,payload) {
         console.log(payload);      state.mnum+=(payload.count+payload.num);    }  },  actions: {
     },  modules: {
     }})

Home.vue

效果

转载地址：http://ixuhz.baihongyu.com/