vuex實(shí)現(xiàn)簡(jiǎn)易計(jì)數(shù)器

2019-11-20 08:38:52

字體：大中小

供稿：網(wǎng)友

本文實(shí)例為大家分享了vue.js計(jì)數(shù)器的制作方法，供大家參考，具體內(nèi)容如下

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, // 設(shè)置為true時(shí)，所有的路徑都會(huì)被格式化為#！開頭 history: true // 默認(rèn)false,利用history.pushState(), history.replaceState()來管理瀏覽歷史記錄})// require('./routers')(router)router.start(App, '#app')

效果圖：