A simple counter example
The following is a very simple example of a counter that summarizes the core concepts ofVuex in a self-contained HTML file:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple counter example</title> </head> <body> <div id="app"></div> <script src="https://unpkg.com/[email protected]/dist/vuex.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script> <script> Vue.use(Vuex); // Sequential module const sequential = { namespaced: true, state() { return { count: 1, }; }, mutations: { increment: state => state.count++, decrement: state => state.count-- }, actions: { increment: ({ commit }) => commit('increment'), decrement: ({ commit }) => commit('decrement'), }, getters: { name: () => 'Sequential', currentCount: state => state.count, }, }; // FizzBuzz module that extends sequential module // and redefine...
