vuex的使用

Vuex的设置

建立文件夹仓库 store

使用一次vuex

对外暴露vuex这个实例

// 对外暴露实例
export default new Vuex.Store()

state 仓库存储数据的地方 初始化的状态

mutations  唯一修改state数据的地方

actions   处理action，书写自己的业务逻辑，也可以处理异步数据

getters  相当于计算属性 简化仓库里面的数据

在入口文件引入仓库 注册仓库

import router from "@/router"
import store from './store'
new Vue({
  render: h => h(App),
  router,
  store
}).$mount('#app')

注册仓库之后，组件实例的身上会多出一个$store属性

组件想获取仓库数据，需要使用辅助函数里面提取数据 mapstate来进行获取数据。映射到组件身上数据。

在组件派发action,但是前提是必须存在于vuex里面的，这个派发的action名必须于组件里面的disptah组件里面的一样，（进行三联环操作），解构出commit提交commit(将里面进行命名，下一步提交到mutations),通过mutations进行修改里面的数据，修改的数据是在state里面的，修改数据为state定义的初始值。将他修改为前置自增或者自减。

实现模块化vuex设置，把所有模块设置为一个小仓库，再进行引入到大仓库。

实现vuex仓库模块式开发存储数据

  // 实现vuex仓库模块式开发存储数据
    modules: {
        home,
        search
    }

将三级联动组件放到components文件夹里面（在这里面存储的一般是非路由组件和全局组件）

在typenav组件挂载完毕：可以向服务器发请求

通知vuex发请求，获取数据，存储于在仓库中，派发dispatch

// 组件挂载完毕可以向服务器发请求
  mounted() {
    // 通知vuex发请求，获取数据，存储于仓库之中
    this.$store.dispatch("categoryList");
  },

通过api里面的接口函数调用、向服务器发请求，获取服务器数据、解构出commit,提交commit数据给mutations数据，设置state里面的起始值数据为空。

并且使用了async和await,解构出commit,开始判断获取服务器数据是否成功（获取到的数据是否为200，是就代表成功），提交mutations数据并且命名，提交的数据为前期定义好的数据。

const actions = {
    async categoryList() {
        let result = await reqCategoryList();
        if (result.code == 200) {
            commit('CATEGORYLIST', result.data)
        }
    }
};

将数据提交到mutations来进行修改(根据接口返回值进行初始化)

const start = {
    categoryList: []
};
const mutations = {
    CATEGORYLIST(start, categoryList) {
        state.categoryList = categoryList
    }
};

组件获取到仓库数据进行展示 使用mapstate映射组件身上数据获取并进行展示、右侧需要的是一个函数，当使用这个计算属性的时候，右侧函数就会立即执行一次，注入一个参数state,其实即为大仓库中的数据。

 computed: {
    ...mapState({
      categoryList: (state) => state.home.categoryList,
    }),
  },

将组件映射完毕之后，需要将数据填入组件中 （数据名和数据id进行混合）

  <div class="all-sort-list2">
          <div
            class="item"
            v-for="(c1, index) in categoryList"
            :key="c1.categoryId"
          >
            <h3>
              <a href="">{{ c1.categoryName }}</a>
            </h3>
 <div class="item-list clearfix">
              <div
                class="subitem"
                v-for="(c2, index) in c1.categoryChild"
                :key="c2.categoryId"
              >
                <dl class="fore">
                  <dt>
                    <a href="">{{ c2.categoryName }}</a>
                  </dt>
                  <dd>
                    <em v-for="c3 in c2.categoryChild" :key="c3.categoryId">
                      <a href="">{{ c3.categoryName }}</a>
                    </em>
                  </dd>
                </dl>
              </div>
            </div>