Vuex implements a simple counter

This article shares the method of creating a vue.js counter for your reference, the specific content is as follows

src/components

Hello.vue

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

Increate.vue

<template>
 <div>
 <button @click='increment' class="btn btn-success">click me + 3</button>
 <button @click='reduce' class="btn btn-warning">click me - 1</button>
 </<div>
</<template>
<script>
import { incrementCounter, reduceCounter } from '../vuex/action
export default {
 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 mutations = {
 INCREMENT (state, n) {
 state.count = state.count + n
 },
 REDUCE (state) {
 state.count--
 }
}
export default new Vuex.Store({
 state,
 mutations
)

action.js

export const incrementCounter = ({dispatch}) => dispatch('INCREMENT', 3)
export const reduceCounter = ({dispatch}) => dispatch('REDUCE')

getters.js

export function getCount (state) {
 return state.count
}

src/App.vue

<template>
 <div id="app">
 <img class="logo" src="./assets/logo.png">
 <hello></hello>
 <increate></increate>
 </<div>
</<template>
<script>
import Hello from '.'/components/Hello
import Increate from '.'/components/Increate
import store from '.'/vuex/store
export default {
 store,
 components: {
 Hello, Increate
 }
}
</<script>
<style>
html {
 height: 100%;
}
body {
 display: flex;
 align-items: center;
 justify-content: center;
 height: 100%;
}
#app {
 color: #2c3e50;
 margin-top: -100px;
 max-width: 600px;
 font-family: Source Sans Pro, Helvetica, sans-serif;
 text-align: center;
}
#app a {
 color: #42b983;
 text-decoration: none;
}
.logo {
 width: 100px;
 height: 100px
}
</style>

　src/main.js

// Entry File
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, // When set to true, all paths will be formatted with #! as the prefix
 history: true // Default false, use history.pushState(), history.replaceState() to manage browser history records
)
// require('./routers')(router)
router.start(App, '#app')

Illustration:

This article has been organized into the 'Vue.js Front-end Component Learning Tutorial', welcome to learn and read.

That's all for this article, I hope it will be helpful to everyone's learning, and I also hope everyone will support the Yelling Tutorial more.

Declaration: The content of this article is from the network, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, the website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please replace # with @ when sending an email for reporting. Provide relevant evidence, and once verified, the website will immediately delete the infringing content.