三、项目中vuex的使用

模块式开发

对不同的组件的仓库进行隔离式管理，即不同组件或者相同业务逻辑可以独享一个小仓库

1、安装vuex

npm install --save vuex

2 、在src下创建store文件，再在store下建一个js文件index.js（对小仓库进行管理）以及其他的小仓库home、search等

 在index.js中代码如下

import Vue from "vue";
//引入vuex
import Vuex from 'vuex';
//进行插件注册
Vue.use(Vuex);
//引入小仓库
import home from "./home";
import search from "./search";
import detail from "./detail";
import shopcart from "./shopcart";
import user from "./user";
import trade from "./trade";
//对外暴露store类的一个实例
export default new Vuex.Store({
//实现vuex仓库模块式开发储存数据
    modules:{
//使用小仓库
        home,
        search,
        detail,
        shopcart,
        user,
        trade
    }
});

        这段代码是使用Vue框架中的Vuex插件来创建一个全局的数据存储仓库，其中包含了多个小的仓库模块，用于存储不同的数据和状态。这些小的仓库模块包括：home、search、detail、shopcart、user和trade。 

这些小的仓库模块可以独立使用，也可以互相调用，从而实现数据共享和状态管理。在实际开发中，我们可以根据不同的业务需求，将数据和状态存储到不同的仓库模块中，从而实现更加清晰和灵活的代码组织和管理。

3、小仓库中的内容，（选home举例）在home下建js文件index.js其代码如下

//引入写好的接口函数
import { reqGoodsInfo } from '@/api'
//state：仓库储存数据的地方
const state = {
    goodInfo: {},
   
}
//mutations:修改state的地方
const mutations = {
    GETGOODINFO(state, goodInfo) {
        state.goodInfo = goodInfo
    }
}
//actions:处理业务逻辑的地方
const actions = {
    async getGoodInfo({ commit }, skuid) {
        let result = await reqGoodsInfo(skuid)
        if (result.code == 200) {
            commit('GETGOODINFO', result.data)
        }
    }
   
}
//getters:理解为计算属性，简化仓库的数据，让组件读取仓库数据是更加方便
const getters = {
    categoryView(state) {
        return state.goodInfo.categoryView || {}
    },
    skuInfo(state) {
        return state.goodInfo.skuInfo || {}
    },
    spuSaleAttrList(state) {
        return state.goodInfo.spuSaleAttrList || []
    }
}
export default {
    state,
    mutations,
    actions,
    getters
} 

- state：定义了一个名为 goodInfo 的对象，用于储存商品信息。
- mutations：定义了一个名为 GETGOODINFO 的 mutation，用于修改 state 中的 goodInfo 对象。当调用该 mutation 时，会传入一个参数 goodInfo，用于更新 state 中的 goodInfo 对象。
- actions：定义了一个名为 getGoodInfo 的 action，用于处理获取商品信息的业务逻辑。该 action 接受一个参数 skuid，用于获取指定商品的信息。在获取到商品信息后，会通过调用 mutations 中的 GETGOODINFO mutation 来更新 state 中的 goodInfo 对象。
- getters：定义了三个名为 categoryView、skuInfo 和 spuSaleAttrList 的计算属性，用于简化从 state 中读取商品信息的操作。这些计算属性会返回 state 中 goodInfo 对象的某些属性或子属性，方便在组件中直接调用。

该模块最终会被导出，可以在其他组件中通过 $store.state.goodInfo、$store.commit('GETGOODINFO', data)、$store.dispatch('getGoodInfo', skuid) 和 $store.getters.categoryView 等方式来访问和修改 Vuex 中的数据。

4、 在项目中的入口文件main.js中引入仓库

//main.js文件

import Vue from 'vue'
import App from './App.vue'

import store from './store';

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

5、可以在需要获取数据的组件中通知服务器，发起请求

import { mapState } from 'vuex'  
export default {
    name:'home',
    components:{
    },
    mounted(){
      //通知vuex发起请求，获取数据，存储于仓库中
      this.$store.dispatch('getGoodInfo')
 
    },
    computed:{
//从仓库中获取数据
     ...mapState({
      floorlist:state=>state.home.floorList
     })
    },
}
</script>

         这段代码是一个 Vue 组件，该组件名为 "home"。它使用了 Vuex 的 mapState 辅助函数来从 Vuex store 中获取数据。在组件的 mounted 钩子函数中，它通过调用 $store.dispatch() 方法通知 Vuex store 发起请求来获取数据，并将数据存储在 store 中。然后，通过 mapState 辅助函数，它从 store 中获取 floorlist 数据，并将其映射到组件的 computed 属性中。这样，组件就可以使用 floorlist 数据来渲染视图。

一般情况下（项目简单的情况下）

import Vue from "vue";
import Vuex from 'vuex';
Vue.use(Vuex);
const state={
}
const mutations={
}
const actions={
}
const getters={}
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
});

使用Vue框架的Vuex插件创建了一个新的store实例。Vuex是Vue框架的一个状态管理工具，可以用来管理Vue组件之间的共享状态。这个store实例包含了state、mutations、actions和getters四个对象。

- state：用来存储应用程序的状态数据，可以通过this.$store.state来访问。
- mutations：用来修改state中的数据，只能进行同步操作，可以通过this.$store.commit()方法来调用。
- actions：用来处理异步操作，可以在actions中触发mutations的方法，可以通过this.$store.dispatch()方法来调用。
- getters：用来获取state中的数据，在组件中可以通过this.$store.getters来访问。

通过将这些对象传递给Vuex.Store构造函数，我们可以创建一个store对象，该对象可以在应用程序的任何组件中使用。最后，通过export default将store对象导出，以便在其他文件中使用。