vuex模块化

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);
import home from "./home"
import search from "./search"
const store = new Vuex.Store({
  modules : {
    home,
    search
  }
});

export default store;

import Vue from 'vue'
import App from './App.vue'
import router from "@/router"
import store from './store'; // 引入我们前面导出的store对象
import TypeNav from "@/pages/Home/TypeNav"
import {categoryList} from "@/api"
Vue.component(TypeNav.name,TypeNav)

categoryList()
Vue.config.productionTip = false
let a =1;
new Vue({
  render: h => h(App),
  router,
  store, // 把store对象添加到vue实例上
}).$mount('#app')

const namespaced = true

const state ={}
const mutations ={
　　setNumber(state) {  // 增加一个mutations的方法，方法的作用是让num从0变成5，state是必须默认参数  state.number = 5;  },
　　setNumberIsWhat(state, payload) {  // 增加一个带参数的mutations方法，并且官方建议payload为一个对象  state.number = payload.number;  },
}
const actions ={
　　

setNum({ commit }) {  // 直接将content结构掉，解构出commit，下面就可以直接调用了  return new Promise(resolve => {  setTimeout(() => {  commit('XXXX'); // 直接调用  resolve();  }, 1000);  });  },


 

}
const getters ={}
export default{
    state,
    mutations,
    actions,
    getters
}

 

import { mapMutations } from 'vuex';
mounted() {
    console.log(`旧值：${this.$store.state.number}`);
    this.$store.commit('setNumber');
    console.log(`新值：${this.$store.state.number}`);
　　this.$store.commit('setNumberIsWhat', { number: 666 }); // 调用的时候也需要传递一个对象  
　　...mapMutations(['setNumberIsWhat']),

  },

 加了命名空间之后，调用commit使用this.$store.commit('home/setNumber');调用action使用this.$store.dispatch("home/test")

import { mapState } from 'vuex'      

computed:{

        ...mapState("home",['categoryList','a'])

    }

调用都是采用模块名 加 属性的方式

 

调mutation时候传对象

　　

this.$store.commit('search/getSearchList',{})

 

async getSearchList(state,data){

        let res = await getSearchList(data)

        console.log("searchlist",res)

    }