Vuex之模块

module 中的 state

// store.js
export default () => {
  return new Vuex.Store({
    modules: {
      a: { // a 模块
        state: {
          text: 1
        }
      },
      b: { // b 模块
        state: {
          text: 2
        }
      }
    }
  })
}

// app.vue
<template>
  <div id="app">
    <p>{{textA}} {{textB}}</p>
  </div>
</template>

<script>
import {
  mapState,
  mapGetters,
  mapActions,
  mapMutations
} from 'vuex'
export default {
  computed: {
    textA () {
      return this.$store.state.a.text // 通过模块的命名空间
    },
    textB () {
      return this.$store.state.b.text
    } 
  }
}
</script>

mapState 简写

computed: {
    // textA () {
    //   return this.$store.state.a.text
    // },
    ...mapState({
      textA: state => state.a.text
    })
  },

module 中的 mutations

这里没有和 state 一样通过模块来调用，vuex 默认会把所有的 mutation 放到全局的命名空间中。

// store 配置
modules: {
      a: {
        state: {
          text: 1
        },
        mutations: {
          updateText (state, text) { // 函数第一个参数是模块的 state 
            console.log('a.state', state)
            state.text = text
          }
        }
      },
      b: {
        state: {
          text: 2
        }
      }
    }

// 组件内
  mounted () {
    this.updateText('123')
  },
  methods: {
    ...mapMutations(['updateCount', 'updateText']) // 传入 mutations
  }
</script>

namespaced

使 mutation 只在模块的命名空间，可以通过设置 namespaced: true 来做，这样在不同模块就可以使用相同命名的 mutaion 和 action 了。更加规范

// store 配置
modules: {
      a: {
        namespaced: true, // 模块的命名空间
        state: {
          text: 1
        },
        mutations: {
          updateText (state, text) {
            console.log('a.state', state)
            state.text = text
          }
        }
      },
      b: {
        state: {
          text: 2
        }
      }
    }

// 组件内
  mounted () {
    this.['a/updateText']('123') // 变量的形式
  },
  methods: {
    ...mapMutations(['updateCount', 'a/updateText']) // 传入 mutations
  }
</script>

module 中的 getters

下例，mapGetters 数组的方式，在 template 里用不太方便。

// store 配置
modules: {
      a: {
        namespaced: true,
        state: {
          text: 1
        },
        mutations: {
          updateText (state, text) {
            console.log('a.state', state)
            state.text = text
          }
        },
        getters: { // module 中的 getters
          textPlus (state) { // state 是此模块下的 state
            return state.text + 1
          }
        }
      },
      b: {
        state: {
          text: 2
        }
      }
    }

// 组件内
mounted () {
    console.log(this.$store, this['a/textPlus']) // 打印出 textPlus
    let i = 1
    setInterval(() => {
      this.updateCount({
        num: i++,
        num2: 2
      })
    }, 1000)
    this.updateCountAsync({
      num: 5,
      time: 2000
    })
    this['a/updateText']('123')
  },
computed: {
    // textA () {
    //   return this.$store.state.a.text
    // },
    textB () {
      return this.$store.state.b.text
    },
    ...mapState({
      counter: (state) => state.count,
      textA: state => state.a.text
    }),
    ...mapGetters(['fullName', 'a/textPlus']) // mapGetters 数组的方式
  },

mapGetters 对象的方式

// 组件内
<template>
  <div id="app">
    <p>{{textPlus}}</p>
</template>
<script>
    computed: {
        ...mapGetters({ // mapGetters 接收对象的方式
          'fullName': 'fullName',
          textPlus: 'a/textPlus'
        })
      },
</script>

接收全局 state

模块下的 getters 可以接收到全局的 state，通过全局的 rootState，我们可以拿到其他模块的 state。

// store 配置
modules: {
      a: {
        namespaced: true,
        state: {
          text: 1
        },
        mutations: {
          updateText (state, text) {
            console.log('a.state', state)
            state.text = text
          }
        },
        getters: {
          textPlus (state, getters, rootState) { // state 是此模块下的 state
            return state.text + rootState.count + rootState.b.text // 拿到不同地方的 state
          }
        }
      },
      b: {
        state: {
          text: 2
        }
      }
    }

module 中的 actions

// store 配置
modules: {
      a: {
        namespaced: true,
        state: {
          text: 1
        },
        mutations: {
          updateText (state, text) {
            console.log('a.state', state)
            state.text = text
          }
        },
        actions: {
          add ({ state, commit, rootState }) { // 从 ctx 中拿，ctx 和 store 类似
            commit('updateText', rootState.count) // 同一模块命名空间下的
          }
        }
      }
}

  mounted () {
    this['a/add']() // 执行
  },
  methods: {
    ...mapActions(['updateCountAsync', 'a/add']),  // 拿到方法
    ...mapMutations(['updateCount', 'a/updateText'])
  }
}
</script>

调用全局命名空间的 mutations

使用 root: true

// store 配置
modules: {
      a: {
        namespaced: true,
        state: {
          text: 1
        },
        mutations: {
          updateText (state, text) {
            console.log('a.state', state)
            state.text = text
          }
        },
        getters: {
          textPlus (state, getters, rootState) { 
            return state.text + rootState.count + rootState.b.text
          }
        },
        actions: {
          add ({ state, commit, rootState }) { 
            commit('updateCount', { num: 56789 }, { root: true }) // 调用全局 mutation updateCount
          }
        }
      },

// 全局 mutations
export default {
  updateCount (state, { num, num2 }) { 
    console.log(num2)
    state.count = num
  }
}

动态注册模块

// indexjs 应用主入口
store.registerModule('c', {
  state: {
    text: 3
  }
})

// 组件内
// template
<p>{{textC}}</p>
// script
 computed: {
    ...mapState({
      textC: state => state.c.text
    })
  },