quasar-cli项目的一些探索一之axios , vuex
quasarFramework,很cool的一个UI框架,专注于移动端追随vue的步伐,quasar来到了0.15+.quasar-cli这个脚手架,对于本菜来说实在就是神器了.现在就来记录下本菜对此cli的一些实践:首先,贴上网址:http://quasar-framework.org/这是大神翻译的中文版 虽然版本落后一点,参考毫无问题项目快速构建神马的文档已经很清楚,这是...
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"];//获取
今天先记录这么多吧…
更多推荐
所有评论(0)