File: app/components/test-counter/store.js

Recommend this page to a friend!
  Classes of Sergey Beskorovayniy   Vuex Examples   app/components/test-counter/store.js   Download  
File: app/components/test-counter/store.js
Role: Example script
Content type: text/plain
Description: Example script
Class: Vuex Examples
Example apps using Vuex state management pattern
Author: By
Last change: Update of app/components/test-counter/store.js
Date: 2 years ago
Size: 1,916 bytes
 

Contents

Class file image Download
define([ 'vue', 'vuex', 'es6_promise' ], function (Vue, Vuex, ES6Promise) { Vue.use(Vuex); // root state object. // each Vuex instance is just a single state tree. var 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. var mutations = { increment: function (state) { state.count++; }, decrement: function (state) { state.count--; } }; // actions are functions that causes side effects and can involve // asynchronous operations. var actions = { increment: function (context) { return context.commit('increment'); }, decrement: function (context) { context.commit('decrement'); }, incrementIfOdd: function (context) { if ((context.state.count + 1) % 2 === 0) { context.commit('increment'); } }, incrementAsync: function (context) { return new ES6Promise.Promise(function (resolve, reject) { setTimeout(function () { context.commit('increment'); resolve(); }, 1000); }); } }; // getters are functions var getters = { evenOrOdd: function (state) { return state.count % 2 === 0 ? 'even' : 'odd'; } }; // A Vuex instance is created by combining the state, mutations, actions, // and getters. var store = new Vuex.Store({ state: state, getters: getters, actions: actions, mutations: mutations }) return store; });