Vue中UI组件库之Vuex与虚拟服务器初识

./www/app/store/index.js:

import Vue from "vue";
import Vuex from "vuex";
import counterStore from "./counter/store.js";//引入counter的store
import taobaoStore from "./taobao/store.js";//引入taobao的store
import createLogger from 'vuex/dist/logger';
Vue.use(Vuex);
export default new Vuex.Store({
 modules: {//放入modules
  counterStore,
  taobaoStore
 },
 plugins : [createLogger()]})

./www/app/store/counter/store.js:

export default {
 namespaced: true, //命名空间
 state : {
  a:100
 },
 mutations : {
  ADD(state,payload){
   state.a++//上面的state
  }
 },
 actions : {
  ADD({commit}){
   commit("ADD")//调用上面mutations的ADD
  }
 }
}

./www/app/store/taobao/store.js:

export default {
 namespaced: true,//开启命名空间跟上面一样的用法
 state : {
  a:200
 },
 mutations : {},
 actions : {}
}

五、配置虚拟服务器

一般情况下，一个应用的数据都需要等待后端接口人员开发完对应的接口才可以获取到，这样子的效率有点低。最好是我们可以自己模拟接口数据，进行页面的数据填充，打通所有关节，之后等接口开发好了，改下接口地址就好了。

所以，作为前端和客户端开发人员，在后端还没有给出对应的api接口时，我们无法做测试。

这时，我们可以使用json-server快速搭建一个测试的api接口，能在几十秒之内搭建好。

json-server 它能模拟“数据库”，提供了一套简单的API（RESTFUL）接口。

在开发过程中，前后端不论是否分离，接口多半是滞后于页面开发的。所以建立一个RESTFUL风格的API接口，给前端页面提供虚拟的数据，是非常有必要的。

因为它足够简单，写少量数据，即可使用。

也因为它足够强大，支持CORS和JSONP跨域请求，支持GET, POST, PUT, PATCH 和 DELETE 方法，更提供了一系列的查询方法，如limit，order等。下面将详细介绍 json-server 的使用。

https://github.com/typicode/json-server

总结

以上所述是小编给大家介绍的Vue中UI组件库之Vuex与虚拟服务器初识 ,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对软件开发网网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！