vuex实现简易计数器

2019-11-20 08:38:52

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了vue.js计数器的制作方法，供大家参考，具体内容如下

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

// 入口文件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, // 设置为true时，所有的路径都会被格式化为#！开头 history: true // 默认false,利用history.pushState(), history.replaceState()来管理浏览历史记录})// require('./routers')(router)router.start(App, '#app')

效果图：