3-3-02-Vuex

Vuex

概念

什么是 Vuex

• Vuex 是专门为 Vue.js 设计的状态管理库
• Vuex 采用集中式的方式存储需要共享的状态
• Vuex 的作用是进行状态管理，解决复杂组件通信，数据共享
• Vuex 继承到了 devtools 中，提供了 time-traval 时光旅行历史回滚功能。

什么情况下使用 Vuex

• 非必要的情况不要使用 Vuex
• 大型的单页应用程序
  • 多个视图依赖于同一状态
  • 来自不同视图的行为需要变更同一状态

核心概念

、

• store

  每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。Vuex 和单纯的全局对象有以下两点不同：

  • Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。

  • 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

• State

  • 保存在 store 中的状态，因为 store 是唯一的所以 state 也是唯一的，称为单一状态树。如果所有的数据都在 state 中，就会很难维护，所以可以采用后续的 module 的方式解决这个问题。

  • 这里的数据是响应式的。

• Getter

  • 根据 state 派生状态

  • Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

• Mutation

  • 更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。

  • Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方。

  • 需要以相应的 type 调用 store.commit 方法来提交 mutation 方法同步的更改状态。

• Action

  • Action 和 Mutation 类似
  • 不同的是 Action 可以进行异步操作

• Module

  • 由于使用单一状态树，应用的所有状态会集中到一个比较的对象上，当应用变得非常复杂时，store 对象就会变得非常臃肿，为了解决这个问题，可以将 store 分为多个模块。

  • 每个模块拥有自己的 State，Getter，Mutation，Action。

State

import { mapState } from 'vuex'
export default {
  name: 'App',
  computed: {
    // 1.
    // count: state => state.count
    // 2.
    // ...mapState(['count', 'msg'])
    // 3.
    ...mapState({
      num: 'count',
      message: 'msg'
    })
  }
}

Getter

import { mapState, mapGetters } from 'vuex'
export default {
  name: 'App',
  computed: {
    // count: state => state.count
    // ...mapState(['count', 'msg'])
    ...mapState({
      num: 'count',
      message: 'msg'
    }),
    ...mapGetters(['reverseMsg'])
  }
}

Mutation

所有的状态更改都必须在 mutation 中进行。

mutations: {
  increate (state, payload) {
    state.count += payload
  }
},

methods: {
  ...mapMutations(['increate'])
}

只能通过 mutation 来同步的更改数据，这样可以方便在 devtools 中检查状态。mutation 只能是同步的，异步操作应该在在 action 中。

Action

actions: {
  increateAsync (context, payload) {
    setTimeout(() => {
      context.commit('increate', 3)
    }, 2000)
  }
},

$store.dispatch('increateAsync', 3)

methods: {
  ...mapMutations(['increate']),
  ...mapActions(['increateAsync'])
}

Module

Module 的作用就是可以让我们将单一状态数拆分成多个模块，每个模块都维护自己的 State, Getters, Mutations, Actions .

// cart
const state = {}
const getters = {}
const mutations = {}
const actions = {}

export default {
  namespaced: true, // 开启命名空间
  state,
  getters,
  mutations,
  actions
}

// products
const state = {
  products: [
    { id: 1, title: 'iphone 11', price: 8000 },
    { id: 2, title: 'iphone 12', price: 10000 }
  ]
}
const getters = {}
const mutations = {
  setProducts (state, payload) {
    state.products = payload
  }
}
const actions = {}

export default {
  namespaced: true, // 开启命名空间
  state,
  getters,
  mutations,
  actions
}

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import cart from './modules/cart'
import products from './modules/products'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {},
  getters: {},
  mutations: {},
  actions: {},
  modules: {
    cart,
    products
  }
})

computed: {
  ...mapState('products', ['products'])
},
methods: {
  ...mapMutations('products', ['setProducts'])
}

严格模式

前面说的状态的变更必须通过 commit mutation 但这只是人为的规定，开启严格模式是从语法上禁止了除了 mutation 以外的更改状态的方法。

// 开启严格模式
new Vuex.Store({
  strict: true,
})

不要再生产模式下使用严格模式

严格模式会深度检查状态树来检查不合规的状态改变，会影响性能。

strict: process.env.NODE_ENV !== 'production',