前端vue：vuex 数据管理的使用

1.1 Vuex 概述

Vuex 是实现组件全局状态（数据）管理的一种机制，可以方便的实现组件之间数据的共享

并且将存储在 vuex 中的数据都是响应式的，能够实时保持数据与页面的同步

1.2 Vuex 的基本使用

Vuex 中的主要核心有如下：

1. State

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 的 State 中进行存储

// 创建store数据源，提供唯一公共数据
 const store = new Vuex.Store({
 state: { count: 0 }
 })

访问 State 中数据的：

方法一：

this.$store.state.全局数据名称

方法二：

// 1. 从 vuex 中按需导入 mapState 函数
import { mapState } from 'vuex'

然后通过导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：

// 2. 将全局数据，映射为当前组件的计算属性
computed: {
 ...mapState(['count'])
}

2. Mutation

Mutation 用于变更 Store中 的数据

只能通过 mutation 变更 Store 数据，不可以直接操作 Store 中的数据

通过这种方式可以集中监控所有数据的变化

// 定义 Mutation
 const store = new Vuex.Store({
   state: {
     count: 0
   },
   mutations: {
     add(state) {
       // 变更状态
       state.count++
     }
   }
 })


// 触发mutation
 methods: {
   handle1() {
     // 触发 mutations 的第一种方式
     this.$store.commit('add')
   }
 }

触发 mutations 传递参数： 方法一： 通过 this.$store.commit() 触发 mutations 传参并修改 state 中的值

// 定义 Mutation
 const store = new Vuex.Store({
   state: {
     count: 0
   },
   mutations: {
     add(state, step) {
       // 变更状态
       state.count += step
     }
   }
 })


// 触发mutation
methods: {
  handle2() {
    // 在调用 commit 函数，
    // 触发 mutations 时携带参数
    this.$store.commit('addN', 3)
  }
}

方法二：从 vuex 中按需导入 mapMutations 函数，将需要的 mutations 函数，映射为当前组件的 methods 方法

// 1. 从 vuex 中按需导入 mapMutations 函数
import { mapMutations } from 'vuex'


// 2. 将指定的 mutations 函数，映射为当前组件的 methods 函数
methods: {
 ...mapMutations(['add', 'addN'])
}

3. Action

Action 用于处理异步任务

如果是通过 异步操作 变更数据，必须通过 Action，不能使用 Mutation，但是在 Action 中还是要通过触发 Mutation 的方式间接变更数据

// 定义 Action
 const store = new Vuex.Store({
   // ...省略其他代码
   mutations: {
     add(state) {
       state.count++
     }
   },
   actions: {
     addAsync(context) {
       setTimeout(() => {
         context.commit('add')
       }, 1000)
     }
   }
 })
 
 
 // 触发 Action
 methods: {
   handle() {
     // 触发 actions 的第一种方式
     this.$store.dispatch('addAsync')
   }
 }

触发 actions 传递参数： 方法一： 通过 this.$store.dispatch() 触发 actions 传参并修改 state 中的值

// 定义 Action
const store = new Vuex.Store({
  // ...省略其他代码
  mutations: {
    addN(state, step) {
      state.count += step
    }
  },
  actions: {
    addNAsync(context, step) {
      setTimeout(() => {
        context.commit('addN', step)
      }, 1000)
    }
  }
})
 
 
// 触发 Action
methods: {
  handle() {
    // 在调用 dispatch 函数，
    // 触发 actions 时携带参数
    this.$store.dispatch('addNAsync', 5)
  }
}

方法二： 从 vuex 中按需导入 mapActions 函数，将需要的 actions 函数，映射为当前组件的 methods 方法

// 1. 从 vuex 中按需导入 mapActions 函数
import { mapActions } from 'vuex'

// 2. 将指定的 actions 函数，映射为当前组件的 methods 函数
methods: {
  ...mapActions(['addASync', 'addNASync'])
}

4. Getter

Getter 用于对 Store 中的数据进行加工处理形成新的数据

Getter 可以对 Store 中已有的数据加工处理之后形成新的数据，类似 Vue 的计算属性

Store 中数据发生变化，Getter 的数据也会跟着变化

// 定义 Getter
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    showNum: state => {
      return '当前最新的数量是【'+ state.count +'】'
    }
  }
})

getters 使用方法一：

this.$store.getters.名称

getters 使用方法二：

import { mapGetters } from 'vuex'
computed: {
  ...mapGetters(['showNum'])
}

5. modules (了解即可)

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

Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

const moduleA = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: () => ({ ... }),
  mutations: { ... },
  actions: { ... }
}

const store = createStore({
  modules: {
    // store.state.a // -> moduleA 的状态
    a: moduleA,
    // store.state.b // -> moduleB 的状态
    b: moduleB
  }
})