vuex的分模块化与辅助函数

目录

分模块化

怎么分模块

模块化后，在vue组件里的使用

vuex的辅助函数

都有什么辅助函数

默认为vuex的index.js的辅助函数

引入

注意事项：  

两种遍历方式

分模块后的使用辅助函数

引入

调用

---

分模块化

怎么分模块

1 在vuex的store文件夹里添加一个js文件，内容如下

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
// 代表这是一个命名独立的空间，不会与index.js里的命名冲突与污染
namespaced:true,   
state:{},
mutations:{},
getters:{},
actions:{},
})

2 vuex的index.js引入并定义

// 引入
import son from './son.js'
// 在modules里注册
export default new Vuex.Store({ 
 modules: { son, },
})

模块化后，在vue组件里的使用

//  state 的使用
this.$store.state.模块名.数据名
// mutations 的使用
this.$store.commit('模块名/模块事件名'，传的数据)
// actions 的使用
this.$store.dispath('模块名/模块异步事件名')

vuex的辅助函数

都有什么辅助函数

mapState  mapActions  mapMutations  mapGetters

默认为vuex的index.js的辅助函数

引入

import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'

注意事项：  

mapState与mapGetters 推荐在计算属性里 使用， 可以直接做data数据使用

 computed: {
    ...mapState(["shopData"]),
  },

其他辅助函数在 methods 里

methods: {
    ...mapActions(["getData"]),
    ...mapMutations(["add"]),
  }

两种遍历方式

// 对象方式  不能简写,前面是当前vue组件里的命名，可以修改，后面是vuex里的命名，不能修改
...mapState({ name:'name' })
// 数组方法 推荐
...mapState(['name'])

分模块后的使用辅助函数

引入

import { mapState, mapGetters } from 'vuex'

调用

 computed: {
    ...mapState('appInfo', ['qualificationCertificateUrl']),
    ...mapGetters('appInfo', ['screenshot']),
  }