Use a small case demonstrates the use of vuex auxiliary function in the real project development

Create a project demo .... skipped the option of directly elected vuex, there is no other option ............................... ......................

demo it is very simple, is through asynchronous transfer interface to process the data and render out all operations go vuex (The figure is shown data)

Interface Address: https://www.easy-mock.com/mock/5ce2a7854c85c12abefbae0b/api/new_article  

Project directory:

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 test package interfaces (HelloWorld.vue written into the code in the test file)

 

<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>

 

axios and simple interface package is completed, into the lower use 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>

 

Helper functions, mapping

<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 use rewrite store files directory

 

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>

 

Other maps do not write, roughly the same, remember the action asynchronously, muation synchronous operation