Vuex的核心概念

#Vuex是做什么的

• Vuex是一个专为Vue.js应用程序开发的状态管理模式
  • 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化
  • Vuex也集成到Vue的官方调试工具devtools extension 提供了诸如零配置的time-travel调试, 状态快照导入导出等高级调式功能
• 状态管理到底是什么
  • 将其看成把需要多个组件共享的变量全部存储在一个对象里面
  • 然后,将这个对象放在顶层的Vue实例中,让其他组件可以使用
• 有什么状态时需要我们在多个组件间共享
  • 比如用户的登陆状态,用户名称, 头像, 地理位置信息等等
  • 比如商品的收藏,购物车中的物品等等
  • 这些状态信息, 我们都可以放在统一的地方,对它进行保存和管理, 而且他们还是响应式的

#Vuex核心概念

• State
• Getters
• Mutation
• Action
• Module

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({})

// 在main.js中全局挂载

State 单一状态数

读取方式:

 js
    方式一: 
            // 直接使用
            this.$store.state.data
    方式二:
            // 先按需导入
            import { mapState } from 'vuex'
            // 然后在 computed 中使用
            ...mapState(['data'])

• Vuex提出单一状态树, 什么是单一状态树
  • 英文名称是 Single Source of Truth, 也可以翻译成单一数据源
• 单一状态树的好处
  • 如果你的状态信息是保存到多个Store对象中,那么之后的管理和维护等等都会变得特别的困难
  • 所以Vuex也使用了单一状态树管理应用层级的全部状态
  • 单一柱状树能够让我们最直接的方式找到某个状态的片段,而且在之后的维护和调式过程中,也可以非常方便的管理和维护

Getters基本使用

使用方式:

js
    方式一: 
            // 直接使用
            this.$store.getters.changeName
    方式二: 
            // 先按需导入
            improt { mapGetters } from 'vuex'
            // 然后在 computed 中使用
            ...mapGetters(['changeName'])

• getters默认是不能传递参数, 如果希望传递参数,那么只能让getters本身返回另一个函数
• 默认参数:
  • 第一个参数: state , 可以访问到state中的数据
  • 第二个参数: getters, 可以访问getters中的数据

Mutation 状态更新

使用方式:

 js
    // 定义一个方法
     mutations: {
        addNum (state, val) {
        state.num += val
        }
     }
    // 两种触发方式
    方式一:
        // 直接通过 commit 触发方法
        this.$store.commit('addNum', 100)
    方式二:
        // 按需导入
        import { mapMutations } from 'vuex'
        // 然后再methods中使用
        ...mapMutations(['addNum'])
- Vuex的store状态的更新唯一方式, 提交Mutation
    - 只能通过mutation 变更Store 数据, 不可以直接操作Store中的数据
    - 通过这种方式虽然操作起来稍微繁琐一些, 但是就可以集中监控所有数据的变化

Action

使用方式:

 mutations: {
    subNums (state, val) {
      state.num -= val
    }
  },
  actions: {
    asyncNum ({ commit }, data) {
      setTimeout(() => {
      // 需要通过mutations更改state
        commit('subNums', data)
      }, 200)
    }
  }
    // 触发的两种方式:
    方式一: 
        this.$store.dispatch('asyncNum', 10)
    方式二: 
        // 先按需导入
        import { mapActions } from 'vuex'
        ...mapActions(['asyncNum'])

• Action 用于处理异步任务
  • 如果通过异步操作变更数据, 必须通过Action, 而不能使用Mutation, 但是在Action中还是要通过触发Mutation 的方式间接变更数据