quasar-cli项目的一些探索一之axios , vuex

quasarFramework,很cool的一个UI框架,专注于移动端
追随vue的步伐,quasar来到了0.15+.quasar-cli这个脚手架,对于本菜来说实在就是神器了.
现在就来记录下本菜对此cli的一些实践:
首先,贴上网址:http://quasar-framework.org/
这是大神翻译的中文版 虽然版本落后一点,参考毫无问题
项目快速构建神马的文档已经很清楚,这是生成的项目结构:

图1

axios的使用:
作为插件,当然是在src/plugins下面啦!我们可以改造下axios.js.
下图是我的改造:

图2
如图,建一个请求类,并将其实例添加到vue原型上,这样就可以在组件中调用了
附上调用方法:

这里我们请求个本地文件:test.json
axios中的请求方法:

代理我们也可以配置下-例子:

devServer: {
      proxy:{
        '/local':{
          target:'http://localhost:8086/statics',
          changeOrigin:true,
          pathRewrite:{
            '^/local':''
          }
        }
      },
      // https: true,
       port: 8086,
      open: true // opens browser window automatically
    }

json文件很简单:

{
   "status" : 0,
   "msg" : "success",
   "data" : [{"name" : "zw","age" : 29},{"name" : "zs","age" : 3}]
}

如此我们可以在执行方法回调中打印结果:

vuex的使用:
先看文档:
http://www.quasarchs.com/guide/app-vuex-store.html
https://vuex.vuejs.org/
我们新增一个模块:module-b
结构:

参考代码:

//state.js
export default {
  userInfo:{"name":"zw","age":29},
  isOnline:1
}

//mutations.js
export const updateUserState = (state,ct) => {
    state.userInfo = ct
}
export const updateOnlineState = (state,ct) => {
    state.isOnline = ct
}

//getters.js
export const userInfo = (state) => {
  return state.userInfo 
}
export const isOnline = (state) => {
  return state.isOnline
}

//      store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

import example from './module-example'
import mB from './module-b'

Vue.use(Vuex)
console.log('vuex-------------');
const store = new Vuex.Store({
  modules: {//引用模块
    example,
    mB
  }
})
if(process.env.DEV && module.hot){//热重载,只应在dev环境下使用
  console.log('热重载');
  // 使 module-b 成为可热重载模块
  module.hot.accept(['./module-b'], () => {
    // 获取更新后的模块
    // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
    const newModuleB = require('./module-b').default;
    // 加载新模块
    store.hotUpdate({
      modules: {
        mB: newModuleB
      }
    })
  })
}

export default store

vue组件中获取 更新数据:

axios请求类中获取 更新数据
首先将store传递进去,在App.vue中添加 init_vuex_store 方法

//axios.js
this.store.commit('mB/updateOnlineState', 0); //更新
this.store.getters["mB/userInfo"];//获取

今天先记录这么多吧…