2022-03-17 Vuex

Vuex和全局变量

关于全局对象和 Vuex 之间的区别，官方写得还是比较通俗易懂的：

Vuex 和单纯的全局对象有以下两点不同：

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

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

3，vuex必要的两个东西：state和mutation
state用来存储状态数据，mutation用来操作state

4，vuex非必要的三个东西：action，getter和module
action用来进行额外的异步操作，内部还是会调用mutation来变更state
getter用来包装一层state，获取基于state的包装状态
当状态数据庞大且复杂的时候，module用来划分不同类型的state

vuex使用

1，读取
实例化vue的时候,可以将store全局注入到vue中
new Vue({
store
})
于是可以在每个组件中，通过调用this.$store.state.xxx来获取某个状态

2，getter
将state进行包装（类似计算属性）

state:{
date:new Date()
}
getters:{
   //可以对state进行第一层包装
   weekDate:state=>{
        retuen state.date.getWeek()
  }
//也可以对getters内部进行封装
deepDate:(state,getters)=>{
return  func(getters.weekDate)
}
}

**getter可以跟state一样在组件内部被使用

computed:{
weekDate(){
return this.$store.getters.weekDate
}
}

**高级用法，给getter传参，只要让getters对应的属性是个函数就行了

getters：{
weekDate：state=>fm=>{
    return func(state.Date,fm)
}
}

//使用
this.$store.getters.weekDate('xxx')

Mutation

vuex规定不能直接设置state的值，必须显示使用mutation

state:{
counter:0
}
//定义mutations
mutations:{
   addCounter(state,n){
state.counter+=n
  }
}
//提交mutaion以变更state
store.commit('addCounter',10)

//另一种commit方式
store.commit({
type:'addCounter',
n:10
})

action

action用来异步更新状态，内部提交的还是mutation

state:{
count:0
}
mutations:{
increment(state){
state.count++
}
},
actions:{
//这里的context类似state，可以拿到state，commit，getters
    incerment(context){
//do some ajax
context.commit('increment')
}
}

**分发action

store.dispatch('increment')
dispatch还可以处理promise返回

actions: {
  actionA ({ commit }) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        commit('someMutation')
        resolve()
      }, 1000)
    })
  }
}
//分发
store.dispatch('actionA').then(()=>{
 //....
})

mapState

其实是使用state的语法糖

之前

computed:{
a(){
 return store.state.a
}
b(){
 return store.state.b
}
}

之后

import {mapstate} from 'vuex'

computed:{
   loaction(){},
   ...mapState({
'a',
'b'
})
}

mapGetters

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      // 将 `this.increment()` 映射为 
      // `this.$store.commit('increment')`
      'increment', 
      // `mapMutations` 也支持载荷：
      // 将 `this.incrementBy(amount)` 映射为 
      // `this.$store.commit('incrementBy', amount)`
      'incrementBy' 
    ]),
    ...mapMutations({
      // 将 `this.add()` 映射为 
      // `this.$store.commit('increment')`
      add: 'increment' 
    })
  }
}

mapActions

同上

Module

如果state管理的数据涉及的业务复杂多变，可以按模块来划分，便于代码维护

将store分割成拥有state，getters，mutatons，actions的部分，每个部分拥有不同的业务功能划分的内容，这就是模块的作用

且模块可以嵌套

**使用module

import moduleA from './module/moduleA';
import moduleB from './module/moduleB';

export default new Vuex.Store({
    modules: {
        moduleA, moduleB,
    },
    // ...
}

在组建中

import {mapState, mapMutations} from 'vuex';
    export default {
        computed: {
            ...mapState({
                name: state => (state.moduleA.text + '和' + state.moduleB.text)
            }),
        },
        methods: {
            ...mapMutations(['setText']),
            modifyNameAction() {
                this.setText();
            }
        },
    }