2.13.2 • Published 5 years ago
vuex-api-request v2.13.2
Vuex Api Request
減少 api 請求重複代碼,開心開發 :)
安裝
$ yarn add vuex-api-request
API Document
Http
使用請求 Instance,我們使用 Axios 套件,相關設定請看 Axios。
import Vue from 'vue'
import {Http} from 'vuex-api-request'
const axiosConfig = {
baseURL: 'http://localhoat:3002',
}
// 將請求 Instance 綁定在 Vue 上
Vue.use(Http(axiosConfig))
在 js 檔案中使用
import Vue from 'vue'
Vue.http.get('/posts')
在 vue 檔案中使用
export default {
methods: {
getPosts() {
this.$http.get('/posts')
},
}
}
LocalStoragePlugin
localStorage 與 vuex 做綁定,當 vuex 的狀態會跟 localStorage 同步,可使用來儲存使用者 token 等資料
// store.js
import Vue from 'vue'
import Vuex from 'vuex'
import auth from './modules/auth'
import {LocalStoragePlugin} from 'vuex-api-request'
Vue.use(Vuex)
const authLocalStoragePlugin = LocalStoragePlugin({
storageKey: 'paradise-soft',
vuexModule: ['auth', auth], // [moduleName, module]
})
export default new Vuex.Store({
state: {},
mutations: {},
actions: {},
getters: {},
modules: {
auth,
},
plugins: [authLocalStoragePlugin],
})
Auth
當我們使用 LocalStoragePlugin 跟 vuex 做綁硬後,我們就可以記住使用者的登入狀態,我們可以從 localStorage 或 vuex module state 取得 token 建立帶有 token 的請求
import Vue from 'vue'
import store from '@/store'
import {Auth} from 'vuex-api-request'
const axiosConfig = {
baseURL: '/api',
}
Vue.use(
Auth({
axiosConfig,
headerBinding: {
Authorization: [store, (state) => state.auth.accessToken]
},
})
)
在 js 檔案中使用
import Vue from 'vue'
Vue.auth.get('/posts')
在 vue 檔案中使用
export default {
methods: {
getPosts() {
this.$auth.get('/posts')
},
}
}
VuexApiRequest
Step 1 - 安裝 VuexApiRequest 與 store 做綁定,及加入 VuexApiRequest mixin
// main.js
import Vue from 'vue'
import store from 'store'
import VuexApiRequest from 'vuex-api-request'
Vue.use(VuexApiRequest(store))
Step 2 - 建立 watch
import VuexApiRequest from 'vuex-api-request'
const watch = VuexApiRequest.createWatch({
response: (res) => res.data,
error: (err) => err,
errorHandler: (context, err) => {
if (err.status === 401) context.dispatch('auth/logout')
},
})
// vuex posts module
const actions = {
async getPosts(context, payload) {
const res = await watch(context, 'getPosts')(fetchPosts(payload))
},
}
在 Vue 檔取得狀態
<template>
<div>
{{$api('getPosts').pedding}}
{{$api('getPosts').error}}
</div>
</template>
export default {
computed: {
getPostsPedding() {
return this.$api('getPosts').pedding
},
getPostsError() {
return this.$api('getPosts').error
}
}
}
queryStringMixin
import queryStringMixin from '@/mixins/queryStringMixin'
export default {
mixins: [queryStringMixin],
data() {
return {
filters: this.queryStringAssign({
page: {type: Number, default: 1},
per_page: {type: Number, default: 10}
})
}
},
watch: {
filters: {
handler(val) {
this.getPosts(this.queryStringReplace(val))
},
immediate: true,
deep: true,
}
}
}
2.13.2
5 years ago
2.13.1
5 years ago
2.13.0
5 years ago
2.12.0
5 years ago
2.11.0
5 years ago
2.10.0
5 years ago
2.9.4
5 years ago
2.9.3
5 years ago
2.9.2
5 years ago
2.9.1
5 years ago
2.9.0
5 years ago
2.8.0
5 years ago
2.7.1
5 years ago
2.7.0
5 years ago
2.5.0
5 years ago
2.4.0
5 years ago
2.3.0
5 years ago
2.2.0
5 years ago
2.1.0
5 years ago
2.0.3
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
2.0.0
5 years ago
1.2.0
5 years ago
0.3.5
5 years ago
0.3.4
5 years ago
0.3.3
5 years ago
0.3.2
5 years ago
0.3.1
5 years ago
0.3.0
5 years ago
0.2.0
5 years ago
0.1.0
5 years ago
0.0.1
5 years ago