vue学习笔记（六）— 关于Vuex可以这样简单理解

关于Vuex可以这样简单理解

作者：狐狸家的鱼

本文链接：关于Vuex

GitHub：sueRimn

概念理解

和大多数文章都一样，从概念解释到引出问题再举例解决问题。

官网中，Vuex是状态管理模式，将所有组件的状态集中式存储管理，并在相应的规则中发生变化。

在我的理解中，组件的状态就是数据，Vuex就是一个集中存储管理所有组件的数据的仓库，当组件需要数据时，从仓库中获取对应数据。

如果Vuex是一个仓库，那将整个项目比作超市，每个组件比作超市里不同的货架，货架上要摆放的货物就是状态（数据），货物从仓库获取。

整个流程可以这样理解：

1、超市（项目）建好后，需要在店内（View）布置多个货架（components），仓库（Vuex）存储货物（State），仓库清点货物后（声明全局变量），提取筛选后（getter）的货物，然后摆放在货架（components）上；

2、如果有人买走了货物，就会挪动货架已有的货物重新摆放（mutation），如果缺货了就会重新补货，通知调货（action）

应用场景

当多个组件拥有共享状态时，可以将它们存储在仓库中，而不用单独每个组件内声明获取。

核心概念

1、State

字面上来理解，State就是状态，可以理解为数据，数据都在计算属性中获取得到。

数据在State中声明存储，组件通过this.$store.state.数据名获取相应数据。

如果获取多个数据，可以使用辅助函数mapState

state: {
    list: {
      tableData: [],
      total: 0,
      currentPage: 1,
      pageSize: 20,
      listLoading: false,
      id: 1
    }
  }

组件中获取数据：

import { mapState } form 'vuex'
computed: {// 计算属性中获取数据
    ...mapState(['list'])
}
<el-table
:data="list.tableData"
highlight-current-row
style="width: 100%;margin-bottom: 20px;"
height="800px"
v-loading="list.listLoading"
size="medium"
class="planListTable el-table__column-filter-trigger"
@cell-dblclick="rowDbClick"
>

2、Getter

有时候需要对State中的状态进行派生，就是进行一些额外的筛选操作，就需要在getter里定义。

getter接受state作为第一个参数:

getters: {
    list: state => state.list
  }

直接返回state的list数据

可以直接在组件中使用this.$store.getters.list进行获取，也可以使用mapGetter辅助函数。

computed: {
    ...mapGetters(['list'])
  },

3、Mutation

更改Vuex的store中状态的唯一方法式提交mutation，在 Vuex 中，mutation 都是同步事务。类似于事件，每个mutation都有一个字符串的类型事件（type）和一个回调函数（handler）。这个回调函数就是对状态进行更改的地方，接受state作为第一个参数。

mutations: {
  INCREMENT: state => state.list.id++
}
methods: {
    add () {
      this.$store.commit('INCREMENT')
    }
}

也可以使用辅助函数mapMutations

methods: {
  ...mapMutations(['INCREMENT'])
    // 或者
    add: 'INCREMENT'
}

如果在组件中调用时有额外传入的参数，就是mutation的载荷（payLoad）。

mutations: {
  INCREMENT: (state, payload) => {
    state.list.id += payload
  }
}
methods: {
    ...mapMutations(['INCREMENT'], 3)
}

4、Action

Action类似mutation，不同在于：

• Action提交的是mutation，而不能直接变更状态

• 可以包含任何异步操作

mutations: {
    INCREMENT: (state, payload) => {
    state.list.id += payload.amount
  }
},
actions: {
    incrementAsync: context => {
      context.commit('INCREMENT')
    }
  }

Action函数接受context对象，即上下文，包含store实例具有的相同方法和属性，但不是store本身，可以使用context.commit提交mutation。

Action通过store.dispatch分发，Actions 支持同样的载荷方式和对象方式进行分发：

// 以载荷形式分发
store.dispatch('incrementAsync', {
  amount: 10
})
​
// 以对象形式分发
store.dispatch({
  type: 'incrementAsync',
  amount: 10
})

在组件中使用 this.$store.dispatch('xxx') 分发 action，或者使用 mapActions 辅助函数将组件的 methods 映射为 store.dispatch 调用

methods: {
  ...mapActions(['incrementAsync'])
}

5、Module

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

可以将store分割为好几个模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割。

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}
​
const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}
​
const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})
​
store.state.a // -> moduleA 的状态
store.state.b // -> moduleB 的状态

对于模块内部的 mutation 和 getter，接收的第一个参数是模块的局部状态对象

默认情况下，模块内部的 action、mutation 和getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation或 action作出响应。

如果希望你的模块具有更高的封装度和复用性，你可以通过添加 namespaced: true 的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

// module1.js
export default {
  namespaced: true,
  state: {

  },
  getters: {
  },
  mutations: {

  },
  actions: {
  }
}
​
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import module1 from './module/module1'
// const strict = process.env.NODE_ENV !== 'production'
const strict = false
Vue.use(Vuex)
​
export default new Vuex.Store({
  modules:{
      module1
  },
  strict: strict
})
// 组件调用
computed: {
    ...mapGetters('module1', ['list'])
 },