Vuex

状态管理

• 在开发中，我们会用应用程序处理很多的数据，这些数据需要保存在我们应用程序徐的某一个位置，对于这些数据的管理我们就称之为状态管理
  image.png

使用方法

• 下载vuex最新版 npm install vuex@next

• 新建文件夹及文件

  
  image.png

* index.js导入createStore ，并创建state共享数据
import { createStore } from 'vuex'
const store = createStore({
  state() {
    return {
      counter: 100
    }
  }
})
export default store;

• 在main.js文件中添加依赖并使用
  import store from './store'
createApp(App).use(store).mount('#app')
• 在组件中使用
  <h2>{{$store.state.counter}}</h2>
• 组件方法中获取数据(不建议修改)
  this.$store.state.counter

• 组件方法通过commit修改数据（建议）

  
  

单一状态树

• 定义：用一个对象就包含全部的应用层级的状态
• 单一状态树的优势：能够使用最直接的方式找到每个状态片段，方便维护、调试和管理

mapState方法

• 导入
• 使用 option api
  setup()做法
  封装成一个函数
  

es6之扩展运算符 三个点（…）

• 对象中的扩展运算符(...)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

let bar = { a: 1, b: 2 };
let baz = { ...bar }; // { a: 1, b: 2 }

相当于

let bar = { a: 1, b: 2 };
let baz = Object.assign({}, bar); // { a: 1, b: 2 }

getter的基本使用

• 类似于computed

option api

• 当多个计算属性时，我们可以使用 mapGetters (需要要导入)
  
  image.png

mutations

• 提交数据

  
  

• mapMutations

  
  image.png
• 提交到根里面 image.png

actions的基本使用（派发）

• 可以进行异步操作

  
  context

image.png

• 派发到根actions里面

  
  

• 派发风格------对象类型

  
  

• 辅助函数 mapActions

  
  image.png

• setup函数中使用

  
  

• 结合axios和promise做异步请求

  
  

modules(模块)

• 使每个模块都拥有自己的state、mutation、action、getter,甚至嵌套子模块

• 基本使用
  导出

  
  userModule
  

  导入

  
  

• 拿一个模块里面的getters里面的数据
  其他模块的getters里面的数据在根getters会做一个合并，
  actions和mutations里面的数据同样会做合并

  
  image.png
  

  但是这种方法很难让人知道数据到低是从那个文件传过来的
  so：我们在定义模块的时候，在其对象里面设置属性

  
  
  使用
  
  
• 在组件里使用模块辅助函数
  写法一
  
  
  写法二：
  import { createNamespacedHelpers, mapState, mapGetters, mapMutations, mapActions } from "vuex"; const { mapState, mapGetters, mapMutations, mapActions } = createNamespacedHelpers("home")

computed（）{
  ...mapState(["homeCounter"]),
  ...mapGetters(["doubleHomeCounter"])
}

关于映射返回函数的处理方式（就算有子模块也适用）

• 使用方法（"模块名字"，["方法名"]）
const getters = useGetters("home", ["doubleHomeCounter"])
• 出口函数index.js

import { useGetters } from './useGetters';
import { useState } from './useState';

export {
  useGetters,
  useState
}

• useState.js

import { mapState, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'

export function useState(moduleName, mapper) {
  let mapperFn = mapState
  if (typeof moduleName === 'string' && moduleName.length > 0) {
    mapperFn = createNamespacedHelpers(moduleName).mapState
  } else {
    mapper = moduleName
  }

  return useMapper(mapper, mapperFn)
}

• useGetters.js

import { mapGetters, createNamespacedHelpers } from 'vuex'
import { useMapper } from './useMapper'

export function useGetters(moduleName, mapper) {
  let mapperFn = mapGetters
  if (typeof moduleName === 'string' && moduleName.length > 0) {
    mapperFn = createNamespacedHelpers(moduleName).mapGetters
  } else {
    mapper = moduleName
  }

  return useMapper(mapper, mapperFn)
}

• useMapper.js

import { computed } from 'vue'
import { useStore } from 'vuex'

export function useMapper(mapper, mapFn) {
  // 拿到store独享
  const store = useStore()

  // 获取到对应的对象的functions: {name: function, age: function}
  const storeStateFns = mapFn(mapper)

  // 对数据进行转换
  const storeState = {}
  Object.keys(storeStateFns).forEach(fnKey => {
    const fn = storeStateFns[fnKey].bind({$store: store})
    storeState[fnKey] = computed(fn)
  })

  return storeState
}