• 欢迎光临~

vue - vuex模块化

开发技术 开发技术 2022-05-22 次浏览

定义moon.js:

也可以把dog模块域cat模块单独的定义在一个文件中,export defautl暴露然后moon.js引入

import Vue from 'vue'
//引入vuex
import Vuex from 'vuex'
//使用vuex插件
Vue.use(Vuex)

//模块化
//关于dog的模块
const dog={
  //异步操作
  actions: {

  },
  //state成员操作
  mutations: {

  },
  //加工state成员给外界
  getters: {

  },
  //state 存放状态
  state: {

  }
}


//关于cat的模块
const cat={
  //异步操作
  actions: {

  },
  //state成员操作
  mutations: {

  },
  //加工state成员给外界
  getters: {

  },
  //state 存放状态
  state: {

  }
}

export default new Vuex.Store({
//使用模块化 modules: {
//myDog: dog, //myCat: cat dog, cat } })

 

模块化之后如何调用方法与数据:

map调用

<script>
//引入mapActions
  import {mapActions,mapMutations,mapGetters,mapState} from 'vuex'
  export default {
    //mapGetters与mapState映射
    computed: {
      //sate数组写法
      ...mapState('dog',['name','age']),
      ...mapState('cat',['name','age']),
      //getters数组写法
      ...mapGetters('dog',['lastName']),
      ...mapGetters('cat',['lastName']),

      //sate对象写法
      ...mapState('dog',{name: 'name',age: 'age'}),
      ...mapState('cat',{name: 'name',age: 'age'}),
      //getters对象写法
      ...mapGetters('dog',{lastName: 'lastName'}),
      ...mapGetters('cat',{lastName: 'lastName'})
    },
    //mapActions与mapMutations映射
    methods: {
      //mapActions对象写法
      ...mapActions('dog',{setName: 'setName'}),
      ...mapActions('cat',{setName: 'setName'}),
      //mapMutations对象写法
      ...mapMutations('dog',{setName: 'SETNAME'}),
      ...mapMutations('cat',{setName: 'SETNAME'}),
      
      //mapActions数组写法
      ...mapActions('dog',['setName']),
      ...mapActions('cat',['setName']),
      //mapMutations数组写法
      ...mapActions('dog',['SETNAME']),
      ...mapActions('cat',['SETNAME']),
    }
  }
</script>

不使用map,原生调用:

 

程序员灯塔
转载请注明原文链接:vue - vuex模块化
喜欢 (0)