vuex使用

1. 下载vuex: npm install vuex --save
2. 在main.js添加:

   import store from "@/store";
   
   new Vue({
     render: (h) => h(App),
     //在入口文件这里注册store,在每一个组件的身上都拥有一个$store这个属性
     store,
   }).$mount("#app");

3. stroe->index.js

   import Vuex from "vuex";
   //引入Vue
   import Vue from "vue";
   //使用插件
   Vue.use(Vuex);
   //引入home|search模块的仓库
   import home from "./home";//stroe->home.js
   import search from "./search";//stroe->search.js
   
   //需要暴露Vuex.Store类的实例(你需要暴露这个类的实例，如果你不对外暴露，外部是不能使用的)
   export default new Vuex.Store({
     //模块：把小仓库进行合并变为大仓库
     modules: {
       home,
       search
     },
   });

4. store .js例子

   import { reqGetBannerList} from "@/api";
   //做了个接口统一管理
   
   //home模块的仓库
   const state = {
     //轮播图的数据
     bannerList: [],
   };
   //mutions是唯一修改state的地方
   const mutations = {
     
     GETBANNERLIST(state, bannerList) {
       state.bannerList = bannerList;
     },
   };
   //action|用户处理派发action地方的，可以书写异步语句、自己逻辑地方
   const actions = {
   
     //获取首页轮播图的数据
     async getBannerList({ commit }) {
       let result = await reqGetBannerList();
       if (result.code == 200) {
         commit("GETBANNERLIST", result.data);
       }
     },
     
   };
   //计算属性
   const getters = {};
   export default {
     state,
     mutations,
     actions,
     getters,
   };

5. 使用   

   //在computed中使用
   
   this.$store.dispatch('actions内需要调用的方法名');
   
   //如使用mapState，则需在该.vue页面import { mapState } from "vuex";
   
   ...mapState({
                                        文件名.方法名
         categoryList: (state) => state.home.categoryList,
     }),