Vuex概念

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态。Vuex 的存储管理器分为以下几个部分：

名称	描述
state	即存储状态的数据。在 `Vuex` 中，存储状态的数据被定义为一个对象，称为 `state` 对象。它是所有组件共享的数据源
getters	用于从 `state` 中派生出一些状态，类似于计算属性。`Getters` 可以让你在模板中使用简单的方法计算衍生出来的状态
mutations	用于修改 `state` 中的数据。`Mutations` 只能通过提交（`commit`）来调用，不能直接修改 `state` 中的数据。这样可以更好地跟踪状态的修改，便于调试。
actions	用于处理异步操作，可以包含任意异步操作。`Actions` 可以包含多个 `Mutation`，并且可以通过提交（`commit`）调用 `Mutation`。`Actions` 中的操作是异步的，可以用来处理网络请求等操作。
modules	用于将 `Vuex` 的 `store` 分割成模块。每个模块拥有自己的 `state`、`mutations`、`actions` 和 `getters`。

具体目录如下：

store
├── getters.js
├── index.js
└── modules

说明：

目录/文件名	描述
modules	目录存放了 Vuex 中的模块（module），可以根据业务需求将不同的状态分离成不同的模块
getters.js	存放了所有的 Vuex getter 函数，getter 函数可以认为是 store 中的计算属性
index.js	是 Vuex 的主入口文件，它用于创建和配置 Vuex store 实例，将 state、mutations、actions、getters 和 modules 等组合在一起

通过Vux实现子组件数据传递

vuex实现

在modules目录下创建ad.js文件，文件内容如下：

#vi src/store/modules/ad.js
import api from '@/api/ad'

const state = {
  // 初始化变量以及接受数据的类型
  tableDataList: []
}

const mutations = {
  // 主要用来修改state中变量的数据，传递的data的数据类型必须是变量可以接受的数据类型
  // 比如Array
  setTableData(state, data) {
    state.tableDataList = data
  }
}
  // actions的函数名称用来调用action触发mutations来达到修改数据
const actions = {
  async searchTableData({ commit }, searchData) {
    const { data } = await api.list(searchData)
    // 将获取的数据处理成Array之后通过commit方法触发mutations的setTableData函数修改state的值
    commit('setTableData', data.results)
  }
}

export default {
  // 如果开启命名空间则访问actions函数时需要带上命名空间的名称，
  // 比如this.$store.dispatch('ad/searchTableData', data) 
  // 这里的ad就是命名空间，命名空间的名字和模块名字保持一致
  namespaced: true,
  state,
  mutations,
  actions
}

设置getters

vi src/store/getters.js
const getters = {
  tableDataList: state => state.ad.tableDataList
}
export defaults getters

在index.js中将vuex属性导入store

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import ad from './modules/ad'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    ad
  },
  getters
})

export default store

使用vuex案例

需求

有三个组件index.vue、search.vue、tableList.vue
index.vue为search.vue和tablelist.vue的父组件
需要实现search.vue点击button按钮之后将数据传递给tablelist.vue组件，并且将数据在tablelist组件上展示出来

在index.vue中导入子组件

<template>
  <div style="margin-top: 10px">
    <search></search>
    <table-list style="margin-top: -10px"></table-list>
  </div>
</template>
<script>
import search from '@/views/ad/search'
import tableList from '@/views/ad/tableList'
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { search, tableList }
}
</script>

在search.vue组件中定义一个函数，点击button时调用这个函数

methods: {
  queryData() {
    // ad/ 代表使用ad命名空间下的searchTableData
    this.$store.dispatch('ad/searchTableData', this.searchMap)
  }

在tableList.vue组件中定义要展示的数据

computed: {
  // 使用mapState函数将ad命名空间下tableDataList变量中的数据获取并赋值给el-table标签传递给table显示数据
  ...mapState('ad', ['tableDataList'])
},
created() {
  // created钩子函数调用searchTableData actions将调用api接口获取到的数据通过commit触发mutations函数将数据保存到state中让computed调用
  this.$store.dispatch('ad/searchTableData', this.searchMap)
}