一个完整运用vuex的一段代码vuex选择模块化开发--调用接口 import { reqCategoryList }

vuex选择模块化开发--调用接口

import { reqCategoryList } from '@/APi'
const state = {
  categoryList: [],
}
const mutations = {
  CATEGORYLIST(state, categoryList) {
    state.categoryList = categoryList
  },
}
const actions = {
  // 通过api的接口调用.向服务器发送请求,获取服务器数据
  async categoryList({ commit }) {
    const result = await reqCategoryList()
    if ((result.code = 200)) {
      // 通知mutation
      **commit('CATEGORYLIST', result.data)**
      console.log(result)
    }
  },
}
const modules = {}
export default {
  state,
  mutations,
  actions,
  modules,
}

在组件中运用vuex 在组件挂载的阶段

mounted(){
//通知vuex发categoryList请求,获取数据 存储在仓库当中
    this.$store.dispatch('categoryList')
    //categoryList会通知mutation,而mutation会将获取到的数据赋值给state中的数据
}

通过以上的步骤,我们的state中已经有了从服务器返回过来的数据这时候我们在组件中拿到这些数据就可以了

import { mapState } from 'vuex'
计算属性:
  computed: {
    ...mapState({
      // 对象的写法右侧是一个函数,当我们使用计算属性的时候,右侧的函数会立即执行一次
      // 注入一个参数state,其实即为大仓库中的数据
      // categoryList: (state) => {
      //   return state.home.categoryList
      // },
      categoryList: (state) => state.home.categoryList,
    }),
  },
}