[vue.js]vuex实现一个简易计数器

来源：互联网发布：电子软件有哪些编辑：程序博客网时间：2024/06/07 01:50

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')

完整代码点击：→ [vuex-demo简易计数器]

1 0