Skip to content

Instantly share code, notes, and snippets.

@tiagoeborsanyi
Last active July 13, 2016 00:45
Show Gist options
  • Save tiagoeborsanyi/9a12ed29f497cbb16bca1f19f347242c to your computer and use it in GitHub Desktop.
Save tiagoeborsanyi/9a12ed29f497cbb16bca1f19f347242c to your computer and use it in GitHub Desktop.
Esse é o arquivo store.js
import Vue from 'vue'
import Vuex from 'vuex'
//Indica para o Vue utilizar o vuex
Vue.use(Vuex)
//cria variaveis de estado para todos os componentes filhos terem acesso
const state = {
info: []
}
//Cria objetos para armazenar todas as mutações das variaveis state
const mutations = {
INCREMENTINFO (state, valor) {
console.log(valor)
}
}
/*
Combina o estado inicial com as mutações para criar um armazém
esse armazém é vinculado ao aplucativo (componente pai)
*/
export default new Vuex.Store({
state,
mutations
})
Arquivo actions.js
export const incrementInfo = function ({dispatch}, e) {
dispatch('INCREMENTINFO', e)
}
O component que chamando a funcção de actions pra poder ser executada quando é clicada:
<script>
import { incrementInfo } from '../../vuex/actions'
console.log(incrementInfo) //retorna uma function
export default {
props: {
item: Object
},
vuex: {
actions: {
incrementInfo
}
}
}
</script>
<template>
<div class="row">
<a v-link="{path: '/create/', name: '/' }"><span @click="incrementInfo('texas')" class="glyphicon glyphicon-map-marker margem-marker" aria-hidden="true"></span></a>
<span>{{item.adress}} </span>
<span class="glyphicon glyphicon-trash margem-trash" aria-hidden="true"></span>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment