Implementación de un contador simple con Vuex

Este ejemplo muestra cómo crear un contador en vue.js, esperamos que sea útil para usted, los detalles son los siguientes

src/componentes

Hello.vue

<plantilla>
 <div class="hello">
 <h1>Now count is {{counterValue}}</h1>
 <br>
 </<div>
</<plantilla>
<script>
import { getCount } from '../vuex/getters'
exportar por defecto {
 vuex: {
 getters: {
  counterValue: getCount
 }
 },
 data () {
 return {
 }
 }
}
</<script>
<style scoped>
h1 {
 color: #42b983;
}
</style>

Increate.vue

<plantilla>
 <div>
 <button @click='increment' class="btn btn-success">click me + 3</button>
 <button @click='reduce' class="btn btn-warning">click me - 1</button>
 </<div>
</<plantilla>
<script>
import { incrementCounter, reduceCounter } from '../vuex/action'
exportar por defecto {
 vuex: {
 actions: {
  increment: incrementCounter,
  reduce: reduceCounter
 }
 },
 data: function () {
 return {
 }
 },
 computed: {},
 ready: function () {},
 attached: function () {},
 methods: {},
 components: {}
}
</<script>
<style lang="css">
</style>

src/vuex

store.js

import Vue from 'vue'
import Vuex from 'Vuex'
Vue.use(Vuex)
const state = {
 count: 0
}
const mutaciones = {
 AUMENTAR (estado, n) {
 estado.cantidad = estado.cantidad + n
 },
 REDUCIR (estado) {
 estado.cantidad--
 }
}
exportar por defecto new Vuex.Store({
 estado,
 mutaciones
)

action.js

exportar const aumentarContador = ({enviar}) => enviar('AUMENTAR', 3)
exportar const reducirContador = ({enviar}) => enviar('REDUCE')

getters.js

exportar función obtenerCantidad (estado) {
 devolver estado.cantidad
}

src/App.vue

<plantilla>
 <div id="app">
 <img class="logo" src="./activos/logo.png">
 <hello></hello>
 <increate></increate>
 </<div>
</<plantilla>
<script>
importar Hola desde './componentes/Hola
importar Increate desde './componentes/Increate
importar almacén desde './vuex/almacén'
exportar por defecto {
 almacén,
 componentes: {
 Hola, Increate
 }
}
</<script>
<estilo>
html {
 height: 100%;
}
cuerpo {
 mostrar: flex;
 alineación-elementos: centro;
 justificar-contenido: centro;
 height: 100%;
}
#app {
 color: #2c3e50;
 margen-arriba: -100px;
 máximo-ancho: 600px;
 fuente-familia: Source Sans Pro, Helvetica, sans-serif;
 texto-alineación: centro;
}
#app a {
 color: #42b983;
 texto-decoración: none;
}
.logo {
 ancho: 100px;
 height: 100px
}
</style>

　src/main.js

// Archivo de entrada
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
/* eslint-disable import VueRouter from 'vue-router'no-new */
new Vue({
 el: 'body',
 components: { App }
)
Vue.use(VueRouter)
Vue.use(VueResource)
var router = new VueRouter({
 hashbang: false, // Al establecer en true, todos los rutas se formatearán con !# como prefijo
 history: true // Predeterminado false, utilice history.pushState(), history.replaceState() para administrar el historial de navegación
)
// require('./routers')(router)
router.start(App, '#app')

Imágenes del proyecto:

Este artículo se ha organizado en el 'Tutorial de Componentes delanteros de Vue.js', bienvenidos a aprender y leer.

Esto es todo el contenido de este artículo, espero que sea útil para su aprendizaje y también espero que todos los estudiantes apoyen y griten tutoriales.

Declaración: El contenido de este artículo se obtiene de la red, es propiedad del autor original, el contenido se contribuye y carga espontáneamente por los usuarios de Internet, este sitio no posee los derechos de propiedad, no se ha editado manualmente y no asume ninguna responsabilidad legal relacionada. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar y proporcionar evidencia relevante. Una vez verificada, este sitio eliminará inmediatamente el contenido sospechoso de infracción.