使用 一个小 案例演示 vuex 在真实项目 开发中的 辅助 函数 的使用

创建 项目 demo .... 略过 , 选项 直选了 vuex ，其它的 没有选.....................................................

demo很简单， 就是 通过 异步调接口 ，处理数据并渲染出来，所有的操作 都走 vuex （下图就是展示的数据）

接口地址:  https://www.easy-mock.com/mock/5ce2a7854c85c12abefbae0b/api/new_article

项目目录：

utils/http.js

import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_URL,
  timeout: 5000
})

// 模拟一个token
const token = "X_Token"

service.interceptors.request.use(
  config => {
    if (token) {
      config.headers['Content-Type'] = 'application/json'
      config.headers['X-Token'] = token
    }
    return config
  },
  error => {
    console.log(error) // for debug
    return Promise.reject(error)
  }
)


service.interceptors.response.use(
  response => {
    const res = response.data
    // 判断非 200 的状态码
    if (res.code !== 200) {
      console.log("状态不是200 有错误")
      if (res.code === 401) {
        console.log("与后台定义好的401 的状态码 为token 过期，此时需要处理 重新登录，并且清除保存的 token信息 ")
      }
      if (res.code === 500) {
        console.log("可能是网络或者与后台定义的其它状态码")
      }
      return Promise.reject(res.msg)
    } else {
      if (res.code === 200) {
        console.log("成功了")
      }
      return res.data
    }
  },
  error => {
    console.log("提示错误信息") // for debug
    return Promise.reject(error)
  }
)

export default service

.env

VUE_APP_URL =  "https://www.easy-mock.com/mock/5ce2a7854c85c12abefbae0b/api"

api/index.js

import http from './../utils/http';

// get 请求是params 接收参数
export function getNewArticle(data) {
  return http({
    url: '/new_article',
    method: "get",
    params: data
  })
}

// post 请求 是data 接收 (放在body 里的json)
// 这个演示 post 请求的 提交方式， 写法
export function postDemo(data) {
  return http({
    url: '/user/userList',
    method: "post",
    data
  })
}

测试 封装的api 接口（在 HelloWorld.vue 文件中写入代码测试）

<template>
  <div>vuex-demo</div>
</template>

<script>
import { getNewArticle } from "@/api";
export default {
  mounted() {
    getNewArticle().then(res => {
      console.log(res);
    });
  }
};
</script>

<style lang="scss" scoped>
</style>

扫描二维码关注公众号，回复： 10259912 查看本文章

axios 和 接口简单封装完毕，下边进入使用 vuex

store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import { getNewArticle } from "@/api";

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    list: []
  },
  mutations: {
    saveArticle(state, data) {
      state.list = data
    }
  },
  actions: {
    getArticle({ commit }) {
      getNewArticle().then(res => {
        commit("saveArticle", res)
      });
    }
  },
  getters: {
    articleList: state => state.list
  }
})
export default store;

HelloWorld.vue

<template>
  <div>
    <!-- <ul>
      <li v-for="item in getList" :key="item.id">{{item.title}}</li>
    </ul>-->
    <hr>
    <ul>
      <li v-for="item in articleList" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
// 使用 辅助函数
import { mapGetters } from "vuex";
export default {
  data() {
    return {
      logo: require("./../assets/logo.png")
    };
  },
  computed: {
    // 第一种写法
    // getList() {
    //   return this.$store.getters.articleList;
    // }
    // 第二种
    ...mapGetters(["articleList"])
  },
  mounted() {
    this.$store.dispatch("getArticle"); // 发起提交
  }
};
</script>

辅助函数使用，映射

<template>
  <div>
    <!-- <ul>
      <li v-for="item in getList" :key="item.id">{{item.title}}</li>
    </ul>-->
    <hr>
    <ul>
      <li v-for="item in articleList" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
// 使用 辅助函数
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      logo: require("./../assets/logo.png")
    };
  },
  computed: {
    // 第一种写法
    // getList() {
    //   return this.$store.getters.articleList;
    // }
    // 第二种
    ...mapGetters(["articleList"])
  },
  mounted() {
    // 第一种写法发起提交
    // this.$store.dispatch("getArticle");
    // 采用 映射
    // this.getArticle();
    // 采用 映射 带参数的
    this.getArticle({ id: 20 });
  },
  methods: {
    ...mapActions(["getArticle"])
  }
};
</script>

<style lang="scss" scoped>
</style>

  modules 使用， 改写 store 文件目录

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'

Vue.use(Vuex)

// https://webpack.js.org/guides/dependency-management/#requirecontext

const modulesFiles = require.context('./modules', true, /\.js$/)

const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

getter.js

const getters = {
  articleList: state => state.article.list
}
export default getters

article.js

import { getNewArticle } from '@/api'
const state = {
  list: []
}

const mutations = {
  saveArticle(state,data){
    state.list = data
  }
}

const actions = {
  getArticle({ commit }, data) {
    getNewArticle().then(res=>{
      commit("saveArticle",res)
    })
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

HelloWorld.vue

<template>
  <div>
    <!-- <ul>
      <li v-for="item in getList" :key="item.id">{{item.title}}</li>
    </ul>-->
    <hr>
    <ul>
      <li v-for="item in articleList" :key="item.id">{{item.title}}</li>
    </ul>
  </div>
</template>

<script>
// 使用 辅助函数
import { mapGetters, mapActions } from "vuex";
export default {
  data() {
    return {
      logo: require("./../assets/logo.png")
    };
  },
  computed: {
    // 第一种写法
    // getList() {
    //   return this.$store.getters.articleList;
    // }
    // 第二种
    ...mapGetters(["articleList"])
  },
  mounted() {
    // 模块化 触发 action (不使用 映射的 写法 )
    // this.$store.dispatch("article/getArticle");
    // 采用映射的写法
    this.getArticle();
  },
  methods: {
    ...mapActions("article", ["getArticle"])
  }
};
</script>

<style lang="scss" scoped>
</style>

其它的映射就不写了，大致都一样，记住 action 操作异步， muation 操作同步