Vuex模块式开发
vue2安装vuex3版本
vue3安装vuex4版本
背景:2个组件:home和search,将store仓库拆分成2个小仓库,home和search两个小仓库用于管理自己模块的数据
store文件夹下新建2个文件夹:home和search
home下index.js
//home模块的小仓库 const state = {}; const mutations = {}; const actions = {}; const getters = {}; export default{ state, mutations, actions, getters }
search下index.js
//search模块的小仓库 const state = {}; const mutations = {}; const actions = {}; const getters = {}; export default{ state, mutations, actions, getters }
store下index.js
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex); //引入小仓库 import home from './home' import search from './search' //对外暴露Store类的一个实例 export default new Vuex.Store({ //实现Vuex仓库模块式开发存储数据 modules:{ home, search } })
示例:页面加载时请求reqCategoryList接口获取分类列表信息
home仓库中
import {reqCategoryList} from '@/api' //home模块的小仓库 const state = { categoryList: [] }; const mutations = { CATEGORYLIST(state,categoryList){ state.categoryList = categoryList } }; const actions = { //通过API里面的接口函数调用,向服务器发送请求,获取服务器的数据 async categoryList({commit}){ let result = await reqCategoryList(); if(result.code==200){ commit("CATEGORYLIST",result.data) } } }; const getters = {}; export default{ state, mutations, actions, getters }
组件中:
<script> import {mapState} from 'vuex'; export default { name: "TypeNav", //组件挂载完毕,可以向服务器发请求 mounted(){ //通知Vuex发请求,获取数据存储于仓库当中 this.$store.dispatch('categoryList') }, computed:{ ...mapState({ //右侧需要的是一个函数,当使用这个计算属性的时候,右侧函数会立即执行一次 //注入一个参数state,其实即为大仓库中的数据 categoryList:(state)=>{ return state.home.categoryList } }) } }; </script>
如果actions中没有业务逻辑,vue组件可用commit方法与mutations直接交互
vue组件中的方法
methods:{
test(){
this.$store.commit('HELLO','你好啊')
}
}
store
const state = {
str:''
};
const mutations = {
HELLO(state,value){
state.str = value;
console.log(state.str);
}
};