Vuex介绍及使用

一、介绍

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

• state
• Getter
• Mutation
• Action
• Module

二、使用场景

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

三、项目应用

1. 安装Vuex
   方式一：
   直接下载 / CDN 引用 https://unpkg.com/vuex

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

在 Vue 之后引入 vuex 会进行自动安装：
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

方式二：
使用npm安装

npm install vuex --save

方式三：
使用yarn安装

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 = false

new 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