init vuex and axios

This commit is contained in:
Eduardo humberto 2017-12-11 17:02:59 -02:00
parent 96e41721f5
commit 48a79a24dd
10 changed files with 140 additions and 8 deletions

View File

@ -1,5 +1,6 @@
{
"presets": [
["es2015", { "modules": false }]
["es2015", { "modules": false }],
["stage-2"]
]
}

View File

@ -8,18 +8,21 @@
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^3.3.7",
"vue": "^2.0.1"
"vue": "^2.0.1",
"vuex": "^3.0.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.24.1",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"vue-loader": "^9.7.0",
"vue-custom-element": "^1.0.13",
"vue-loader": "^9.7.0",
"webpack": "2.1.0-beta.25",
"webpack-dev-server": "2.1.0-beta.0"
}

View File

@ -1,14 +1,39 @@
<template>
<div class="component">
<p>{{ name }}</p>
<input type="text">
<input type="text" v-model.lazy="value" >
</div>
</template>
<script>
import store from '../../../js/store/store'
import { mapGetters } from 'vuex';
export default {
store,
props: {
name: { type: String }
name: { type: String },
item: { type: Number },
metadata: { type: Number },
},
computed:{
value : {
get(){
let metadata = this.$store.getters['item/getMetadata'].find(metadata => metadata.metadata_id === this.metadata );
if( metadata ){
return metadata.values;
}
},
set( value ){
let metadata = this.$store.getters['item/getMetadata'].find(metadata => metadata.metadata_id === this.metadata );
if( ! metadata ){
this.$store.dispatch('item/addMetadata', { item_id: this.item, metadata_id: this.metadata, values: value });
}else{
this.$store.dispatch('item/updateMetadata', { item_id: this.item, metadata_id: this.metadata, values: value });
}
}
}
}
}
</script>

View File

@ -21,7 +21,9 @@ class Text extends Field_Type {
*/
public function render( $metadata ){
return '<tainacan-text name="'.$metadata->get_name().'"></tainacan-text>';
return '<tainacan-text metadata="'.$metadata->get_id().'"
item="'.get_the_ID().'"
name="'.$metadata->get_name().'"></tainacan-text>';
}
/**

View File

@ -30,6 +30,8 @@ class DevInterface {
function add_admin_js() {
global $TAINACAN_BASE_URL;
wp_enqueue_script('wp-settings',$TAINACAN_BASE_URL . '/js/wp-settings.js');
wp_localize_script( 'wp-settings', 'wpApiSettings', array( 'root' => esc_url_raw( rest_url() ), 'nonce' => wp_create_nonce( 'wp_rest' ) ) );
wp_enqueue_script('tainacan-dev-admin', $TAINACAN_BASE_URL . '/assets/web-components.js');
}

9
src/js/axios/axios.js Normal file
View File

@ -0,0 +1,9 @@
import axios from 'axios';
const instance = axios.create({
baseURL: wpApiSettings.api_root
});
//instance.defaults.headers.common['something'] = 'none';
export default instance;

View File

@ -1,4 +1,6 @@
import Vue from 'vue'
import store from './store/store'
// include vue-custom-element plugin to Vue
import VueCustomElement from 'vue-custom-element';

View File

@ -0,0 +1,76 @@
import axios from '../../axios/axios';
const state = {
item: null,
metadata:[],
isInit:false,
};
const mutations = {
setItem( state, item){
state.item = item;
},
setMetadata( state, metadata){
state.metadata = metadata;
},
addMetadata( state, metadata){
state.metadata.push( metadata );
},
updateMetadata( state, metadata){
var index = state.metadata.findIndex(itemMetadata => itemMetadata.metadata_id === metadata.metadata_id);
state.metadata[index] = metadata;
},
setInit( state, init){
state.isInit = init;
},
};
const actions = {
initItem: ( { commit }, item) => {
commit('setItem', { id: 1, title: 'item' });
},
initMetadata: ( { commit }, item) => {
commit('setMetadata', [
{ item_id: 1, metadata_id: 1, values: [ 'valor' ] }
]);
},
addMetadata: ( { commit }, { item_id, metadata_id, values }) => {
// axios.post('/metadata/item/'+item, {
// metadata_id: metadata,
// values: values
// })
// .then( res => {
// commit('setMetadata', res);
// })
// .catch(error => console.log( error ));
commit('addMetadata', { item_id: item_id, metadata_id: metadata_id, values: values });
},
updateMetadata: ( { commit }, { item_id, metadata_id, values }) => {
// axios.post('/metadata/item/'+item, {
// metadata_id: metadata,
// values: values
// })
// .then( res => {
// commit('setMetadata', res);
// })
// .catch(error => console.log( error ));
commit('updateMetadata', { item_id: item_id, metadata_id: metadata_id, values: values });
}
};
const getters = {
getItem: state => {
return state.item;
},
getMetadata: state => {
return state.metadata;
}
};
export default {
namespaced: true,
state,
mutations,
actions,
getters
}

12
src/js/store/store.js Normal file
View File

@ -0,0 +1,12 @@
import Vue from 'vue';
import Vuex from 'vuex';
import item from './modules/item';
Vue.use(Vuex);
export default new Vuex.Store({
modules: {
item
}
})

0
src/js/wp-settings.js Normal file
View File