zoukankan      html  css  js  c++  java
  • vuex-count

    //counter.vue
    <template>
      <div id="app">
        Clicked: {{ $store.state.count }} times, count is {{ evenOrOdd }}.
        <button @click="increment">+</button>
        <button @click="decrement">-</button>
        <button @click="incrementIfOdd">Increment if odd</button>
        <button @click="incrementAsync">Increment async</button>
      </div>
    </template>
    
    <script>
    import { mapGetters, mapActions } from 'vuex'
    export default {
      computed: mapGetters([
        'evenOrOdd'
      ]),
      methods: mapActions([
        'increment',
        'decrement',
        'incrementIfOdd',
        'incrementAsync'
      ])
    }
    </script>
    
    //app.js
    import 'babel-polyfill'
    import Vue from 'vue'
    import Counter from './Counter.vue'
    import store from './store'
    
    new Vue({
      el: '#app',
      store,
      render: h => h(Counter)
    })
    
    //index.html
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>vuex counter example</title>
        <link rel="stylesheet" href="/global.css">
      </head>
      <body>
        <div id="app"></div>
        <script src="/__build__/shared.js"></script>
        <script src="/__build__/counter.js"></script>
      </body>
    </html>
    
    //store.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    // root state object.
    // each Vuex instance is just a single state tree.
    const state = {
      count: 0
    }
    
    // mutations are operations that actually mutates the state.
    // each mutation handler gets the entire state tree as the
    // first argument, followed by additional payload arguments.
    // mutations must be synchronous and can be recorded by plugins
    // for debugging purposes.
    const mutations = {
      increment (state) {
        state.count++
      },
      decrement (state) {
        state.count--
      }
    }
    
    // actions are functions that causes side effects and can involve
    // asynchronous operations.
    const actions = {
      increment: ({ commit }) => commit('increment'),
      decrement: ({ commit }) => commit('decrement'),
      incrementIfOdd ({ commit, state }) {
        if ((state.count + 1) % 2 === 0) {
          commit('increment')
        }
      },
      incrementAsync ({ commit }) {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            commit('increment')
            resolve()
          }, 1000)
        })
      }
    }
    
    // getters are functions
    const getters = {
      evenOrOdd: state => state.count % 2 === 0 ? 'even' : 'odd'
    }
    
    // A Vuex instance is created by combining the state, mutations, actions,
    // and getters.
    export default new Vuex.Store({
      state,
      getters,
      actions,
      mutations
    })
    
    You can change the world with your heart,even a lot of changes sometimes unless you won't geiv up....
  • 相关阅读:
    uva 11294 Wedding
    uvalive 4452 The Ministers’ Major Mess
    uvalive 3211 Now Or Later
    uvalive 3713 Astronauts
    uvalive 4288 Cat Vs. Dog
    uvalive 3276 The Great Wall Game
    uva 1411 Ants
    uva 11383 Golden Tiger Claw
    uva 11419 SAM I AM
    uvalive 3415 Guardian Of Decency
  • 原文地址:https://www.cnblogs.com/xiongwei2017/p/6624972.html
Copyright © 2011-2022 走看看