Vuex 多模块管理 耦合解耦合

Vuex

基本使用

安装

npm i vuex

yarn add vuex

###1.引入依赖

import Vue  from 'vue'
import Vuex from 'vuex'
//注册
Vue.use(Vuex)
//创建数据管理对象
const store=new  Vuex.Store({
   state:{
   },
   mutations:{
   
	}//数据同步处理单元
   actions:{
   	
	}//数据异步请求单元
   getters:{
   }//数据运算单元        
  }
})
//导出数据对象
export defalult  store
//将 数据单元挂载在Vue上

import store from '.../url'

new Vue({
 store,
  render: h => h(App),
}).$mount('#app')

调用过程

actions(一般用获取请求) > mutations(更改数据操作) > state(数据存储)

耦合使用

//因为数据挂载在 Vue实例对象上 所以我们可以直接进行使用
this.$store.state....就拿到了 Vuex管理的数据

解耦合使用

管理一个数据模块的解耦合

//引入依赖
import { mapActions, mapState } from "vuex";
//引入数据
computed: {
    ...mapState(["RouleList"]),
},
//引入异步方法
...mapActions(["ininActionRouList"]) 

• 引入的state方法写在 methods里面
• 引入的state数据写在computed里面 computed

管理多个页面数据模块解耦合

store管理中心的配置

//如下配置
import Vue from 'vue'
import Vuex from 'vuex'

import menus from '../router/modules/menu.js' //数据模块
import roule from '../router/modules/Roule.js'
import user from '../router/modules/User.js'
import sort from '../router/modules/sort.js'
Vue.use(Vuex)
export default new Vuex.Store({
  //数据存储单元
   state: {
        catelist: []
    },
   //数据操作
    mutations: {
    },
   //数据请求
    actions: {
    },
    modules: {
        menus, roule, user,sort
    }
})

子模块状态管理

//引入 axios
import axios from '../../../utils/axios'
//创建数据存储
const DisMusic = {
    namespaced:true,
    state: {
        DismusicList: []
    },
    mutations: {
       
    },
    actions: {
      
    },
    getters: {
             
    },
}
export default DisMusic
//将这个子模块属性挂载到父模块modules即可

//引入依赖
improt {mapState,mapActions}  from 'vuex'
//引入数据
computed:{
   ...mapState['home',['list']]
}
methods:{`在这里插入代码片`
  ..mapActions['home','initActions']
}

此时就完成了 单个模块数据和 多个数据模块 的处理

注意

函数名	使用方法
mutations(state,payload)	修改数据
Actions(context,palyolad)	异步操作

context 里面包含了 dispath(同步) 和 commit(异步)

调用例子

      ...mapState('DisStor',['DismusicList'])
  },
  methods:{
       ...mapActions('DisStor',['ActionsInit']),
  }