add vuex-persist
This commit is contained in:
breno-pereira
169
pages/index.vue
169
pages/index.vue
@@ -103,10 +103,24 @@
|
||||
</ul>
|
||||
<ul v-for="(param, index) in bodyParams" :key="index">
|
||||
<li>
|
||||
<input :placeholder="'key '+(index+1)" :name="'bparam'+index" v-model="param.key" @keyup.prevent="setRouteQueryState" autofocus>
|
||||
<input
|
||||
:placeholder="'key '+(index+1)"
|
||||
:name="'bparam'+index"
|
||||
:value="param.key"
|
||||
@change="$store.commit('setKeyBodyParams', { index, value: $event.target.value })"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
autofocus
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<input :placeholder="'value '+(index+1)" :id="'bvalue'+index" :name="'bvalue'+index" v-model="param.value" @keyup.prevent="setRouteQueryState">
|
||||
<input
|
||||
:placeholder="'value '+(index+1)"
|
||||
:id="'bvalue'+index"
|
||||
:name="'bvalue'+index"
|
||||
:value="param.value"
|
||||
@change="$store.commit('setValueBodyParams', { index, value: $event.target.value })"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
@@ -284,10 +298,23 @@
|
||||
</ul>
|
||||
<ul v-for="(header, index) in headers" :key="index">
|
||||
<li>
|
||||
<input :placeholder="'header '+(index+1)" :name="'header'+index" v-model="header.key" @keyup.prevent="setRouteQueryState" autofocus>
|
||||
<input
|
||||
:placeholder="'header '+(index+1)"
|
||||
:name="'header'+index"
|
||||
:value="header.key"
|
||||
@change="$store.commit('setKeyHeader', { index, value: $event.target.value })"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
autofocus
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<input :placeholder="'value '+(index+1)" :name="'value'+index" v-model="header.value" @keyup.prevent="setRouteQueryState">
|
||||
<input
|
||||
:placeholder="'value '+(index+1)"
|
||||
:name="'value'+index"
|
||||
:value="header.value"
|
||||
@change="$store.commit('setValueHeader', { index, value: $event.target.value })"
|
||||
@keyup.prevent="setRouteQueryState"
|
||||
>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
@@ -327,10 +354,21 @@
|
||||
</ul>
|
||||
<ul v-for="(param, index) in params" :key="index">
|
||||
<li>
|
||||
<input :placeholder="'parameter '+(index+1)" :name="'param'+index" v-model="param.key" autofocus>
|
||||
<input
|
||||
:placeholder="'parameter '+(index+1)"
|
||||
:name="'param'+index"
|
||||
:value="param.key"
|
||||
@change="$store.commit('setKeyParams', { index, value: $event.target.value })"
|
||||
autofocus
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<input :placeholder="'value '+(index+1)" :name="'value'+index" v-model="param.value">
|
||||
<input
|
||||
:placeholder="'value '+(index+1)"
|
||||
:name="'value'+index"
|
||||
:value="param.value"
|
||||
@change="$store.commit('setValueParams', { index, value: $event.target.value })"
|
||||
>
|
||||
</li>
|
||||
<div>
|
||||
<li>
|
||||
@@ -428,25 +466,9 @@
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
label: '',
|
||||
showModal: false,
|
||||
copyButton: '<i class="material-icons">file_copy</i>',
|
||||
copiedButton: '<i class="material-icons">done</i>',
|
||||
method: 'GET',
|
||||
url: 'https://reqres.in',
|
||||
auth: 'None',
|
||||
path: '/api/users',
|
||||
httpUser: '',
|
||||
httpPassword: '',
|
||||
passwordFieldType: 'password',
|
||||
bearerToken: '',
|
||||
headers: [],
|
||||
params: [],
|
||||
bodyParams: [],
|
||||
rawParams: '',
|
||||
rawInput: false,
|
||||
contentType: 'application/json',
|
||||
requestType: 'JavaScript XHR',
|
||||
isHidden: true,
|
||||
response: {
|
||||
status: '',
|
||||
@@ -533,6 +555,70 @@
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
url: {
|
||||
get() { return this.$store.state.request.url; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'url' }) },
|
||||
},
|
||||
method: {
|
||||
get() { return this.$store.state.request.method; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'method' }) },
|
||||
},
|
||||
path: {
|
||||
get() { return this.$store.state.request.path; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'path' }) },
|
||||
},
|
||||
label: {
|
||||
get() { return this.$store.state.request.label; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'label' }) },
|
||||
},
|
||||
auth: {
|
||||
get() { return this.$store.state.request.auth; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'auth' }) },
|
||||
},
|
||||
httpUser: {
|
||||
get() { return this.$store.state.request.httpUser; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'httpUser' }) },
|
||||
},
|
||||
httpPassword: {
|
||||
get() { return this.$store.state.request.httpPassword; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'httpPassword' }) },
|
||||
},
|
||||
bearerToken: {
|
||||
get() { return this.$store.state.request.bearerToken; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'bearerToken' }) },
|
||||
},
|
||||
headers: {
|
||||
get() { return this.$store.state.request.headers; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'headers' }) },
|
||||
},
|
||||
params: {
|
||||
get() { return this.$store.state.request.params; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'params' }) },
|
||||
},
|
||||
bodyParams: {
|
||||
get() { return this.$store.state.request.bodyParams; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'bodyParams' }) },
|
||||
},
|
||||
rawParams: {
|
||||
get() { return this.$store.state.request.rawParams; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'rawParams' }) },
|
||||
},
|
||||
rawInput: {
|
||||
get() { return this.$store.state.request.rawInput; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'rawInput' }) },
|
||||
},
|
||||
requestType: {
|
||||
get() { return this.$store.state.request.requestType; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'requestType' }) },
|
||||
},
|
||||
contentType: {
|
||||
get() { return this.$store.state.request.contentType; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'contentType' }) },
|
||||
},
|
||||
passwordFieldType: {
|
||||
get() { return this.$store.state.request.passwordFieldType; },
|
||||
set(value) { this.$store.commit('setState', { value, 'attribute': 'passwordFieldType' })}
|
||||
},
|
||||
requestName() {
|
||||
return this.label
|
||||
},
|
||||
@@ -635,19 +721,19 @@
|
||||
requestString.push(' method: "' + this.method + '",\n')
|
||||
if (this.auth === 'Basic') {
|
||||
var basic = this.httpUser + ':' + this.httpPassword;
|
||||
headers.push(' "Authorization": "Basic ' + window.btoa(unescape(encodeURIComponent(basic))) + ',\n')
|
||||
this.$store.commit('addHeaders', ' "Authorization": "Basic ' + window.btoa(unescape(encodeURIComponent(basic))) + ',\n')
|
||||
} else if (this.auth === 'Bearer Token') {
|
||||
headers.push(' "Authorization": "Bearer Token ' + this.bearerToken + ',\n')
|
||||
this.$store.commit('addHeaders', ' "Authorization": "Bearer Token ' + this.bearerToken + ',\n')
|
||||
}
|
||||
if (['POST', 'PUT', 'PATCH'].includes(this.method)) {
|
||||
const requestBody = this.rawInput ? this.rawParams : this.rawRequestBody;
|
||||
requestString.push(' body: ' + requestBody + ',\n')
|
||||
headers.push(' "Content-Length": ' + requestBody.length + ',\n')
|
||||
headers.push(' "Content-Type": "' + this.contentType + '; charset=utf-8",\n')
|
||||
this.$store.commit('addHeaders', ' "Content-Length": ' + requestBody.length + ',\n')
|
||||
this.$store.commit('addHeaders', ' "Content-Type": "' + this.contentType + '; charset=utf-8",\n')
|
||||
}
|
||||
if (this.headers) {
|
||||
this.headers.forEach(function (element) {
|
||||
headers.push(' "' + element.key + '": "' + element.value + '",\n');
|
||||
this.$store.commit('addHeaders', ' "' + element.key + '": "' + element.value + '",\n')
|
||||
})
|
||||
}
|
||||
headers = headers.join('').slice(0, -3);
|
||||
@@ -688,7 +774,7 @@
|
||||
return requestString.join('').slice(0, -3);
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
handleUseHistory({
|
||||
label,
|
||||
@@ -883,40 +969,36 @@
|
||||
this.params = params;
|
||||
},
|
||||
addRequestHeader() {
|
||||
this.headers.push({
|
||||
this.$store.commit('addHeaders', {
|
||||
key: '',
|
||||
value: ''
|
||||
});
|
||||
})
|
||||
return false
|
||||
},
|
||||
removeRequestHeader(index) {
|
||||
this.headers.splice(index, 1)
|
||||
this.$store.commit('removeHeaders', index)
|
||||
this.$toast.error('Deleted', {
|
||||
icon: 'delete'
|
||||
});
|
||||
},
|
||||
addRequestParam() {
|
||||
this.params.push({
|
||||
key: '',
|
||||
value: ''
|
||||
})
|
||||
this.$store.commit('addParams', { key: '', value: '' })
|
||||
|
||||
return false
|
||||
},
|
||||
removeRequestParam(index) {
|
||||
this.params.splice(index, 1)
|
||||
this.$store.commit('removeParams', index)
|
||||
this.$toast.error('Deleted', {
|
||||
icon: 'delete'
|
||||
});
|
||||
},
|
||||
addRequestBodyParam() {
|
||||
this.bodyParams.push({
|
||||
key: '',
|
||||
value: ''
|
||||
})
|
||||
this.$store.commit('addBodyParams', { key: '', value: '' })
|
||||
|
||||
return false
|
||||
},
|
||||
removeRequestBodyParam(index) {
|
||||
this.bodyParams.splice(index, 1)
|
||||
this.$store.commit('removeBodyParams', index)
|
||||
this.$toast.error('Deleted', {
|
||||
icon: 'delete'
|
||||
});
|
||||
@@ -1066,10 +1148,7 @@
|
||||
this.path = "";
|
||||
this.headers = [];
|
||||
for (const key of Object.keys(parsedCurl.headers)) {
|
||||
this.headers.push({
|
||||
key: key,
|
||||
value: parsedCurl.headers[key]
|
||||
})
|
||||
this.$store.commit('addHeaders', { key: key, value: parsedCurl.headers[key] })
|
||||
}
|
||||
this.method = parsedCurl.method.toUpperCase();
|
||||
if (parsedCurl["data"]){
|
||||
|
||||
Reference in New Issue
Block a user