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

一、介绍

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，这里的状态管理实际上就是公共数据管理。

• state
• Getter
• Mutation
• Action
• Module

二、使用场景

对于多层嵌套的组件，传参是一个很头疼的问题。如果有一个地方能够存放公共数据，多个组件只需从同一个地方取想要的数据，减少组件之间的繁琐值传递。

三、项目应用

1. 安装Vuex
   方式一：
   直接下载 / CDN 引用

Unpkg.com 提供了基于 NPM 的 CDN 链接。以上的链接会一直指向 NPM 上发布的最新版本。您也可以通过 这样的方式指定特定的版本。

在 Vue 之后引入 vuex 会进行自动安装：

方式二：

npm install vuex --save

方式三：

yarn add vuex

2. 在项目创建一个store文件夹，该文件夹下包含一个index.js文件

import Vue from 'vue'# 1. 使用npm或yarn安装包# 2. 导入包import Vuex from 'vuex'# 3. 注册vuex到Vue中Vue.use(Vuex)# 4. new Vuex.Store（）实例，得到一个数据仓储对象export default new Vuex.Store({  state: {  // 可以把state想象成组件中的data，专门用来存储数据    groupName: '',    projectName: '',    actionName: '',    apiId: 0  },  mutations: {  // 注意：如果要操作store中的state 值，只能通过调用mutations提供的方法，才能操作对应数据。  //不推荐直接操作state中的数据。原因：由于每一个组件都有可能操作数据，万一导致了数据的紊乱，不能快速定位到错误的原因    editGroupName(state, param){      state.groupName = param    },    editProjectName(state, param){      state.projectName = param;    },    editActionName(state, param){      state.actionName = param.actionName;      state.apiId = param.apiId    }  },  getters: {  // 注意：这里的getters只负责对外提供数据，不负责修改数据，如果要修改state中的数据，请去找mutations  // getters中的方法和组件中的过滤器比较类似，因为过滤器和getters都没有修改原数据，都是把原数据做了一层包装，提供给了调用者。  // 其次，getters和computed比较像，只要state中的数据发生变化啦，那么，如果getters正好也引用了这个数据，就会立刻触发getters的重新求值  },  actions: {  },  modules: {  }})

3. 更新main.js中代码

import Vue from 'vue'import Antd from 'ant-design-vue'import 'ant-design-vue/dist/antd.css'import axios from 'axios'Vue.prototype.axios = axios#引入Vuex相关import store from './store'import App from './App.vue'Vue.use(Antd);Vue.config.productionTip = falsenew Vue({  store,   //新添加内容  render: h => h(App),}).$mount('#app')

4. 将数据存入store中

#使用commit方法，参数1: 代表mutations中的方法名，参数2：代表参数（只能有一个参数）this.$store.commit('editGroupName', groupName);

5. 将store中的数据取出

#其中groupName是state 中定义的变量名this.$store.state.groupName

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