import * as Vue from 'vue'; import * as Vuex from '../index'; import createLogger from '../../logger'; Vue.use(Vuex); interface ISimpleState { count: number; } const INCREMENT = 'INCREMENT'; const INCREMENT_OBJECT = 'INCREMENT_OBJECT'; function createStore(): Vuex.Store { const state: ISimpleState = { count: 0 }; const mutations: Vuex.MutationTree = { [INCREMENT] (state: ISimpleState, amount: number) { state.count = state.count + amount; }, [INCREMENT_OBJECT] (state: ISimpleState, payload: number) { state.count = state.count + payload; } }; return new Vuex.Store({ state, mutations, strict: true }); } namespace TestDispatch { const store = createStore(); store.dispatch(INCREMENT, 1); store.dispatch({ type: INCREMENT_OBJECT, silent: true, payload: 10 }); } namespace TestWithComponent { const store = createStore(); const a: vuejs.ComponentOption = { vuex: { getters: { count: (state: ISimpleState) => state.count }, actions: { incrementCounter({ dispatch, state }: Vuex.Store) { dispatch(INCREMENT, 1); } } } }; const app = new Vue({ el: '#app', components: { a }, store }); const b: number = app.$store.state.count; } namespace TestModules { interface INumberState { value: number; } interface INestedModuleState extends INumberState { a: INumberState; b: INumberState; } interface IModuleState { nested: INestedModuleState; c: INumberState; } const aState = { value: 1 }; const bState = { value: 2 }; const cState = { value: 3 }; const nestedState = { value: 4 }; const mutations: Vuex.MutationTree = { INCREMENT (state: INumberState) { state.value = state.value + 1; } }; const a = { state: aState, mutations }; const b = { state: bState, mutations }; const nested = { state: nestedState, mutations, modules: { a, b } }; const c = { state: cState, mutations }; const store = new Vuex.Store({ modules: { nested, c } }); const valA = store.state.nested.a.value; const valB = store.state.nested.b.value; const valC = store.state.c.value; const valNested = store.state.nested.value; } namespace TestPlugin { const a = (store: Vuex.Store) => {}; const b = (store: Vuex.Store) => {}; new Vuex.Store({ state: { count: 1 }, plugins: [a, b] }); } namespace TestReplaceState { const store = createStore(); store.replaceState({ count: 10 }); } namespace TestWatch { const store = createStore(); store.watch(state => state.count, value => { const a: number = value; }, { deep: true, immidiate: true }); } namespace TestHotUpdate { const store = createStore(); const mutations: Vuex.MutationTree = { INCREMENT (state: ISimpleState) { state.count++; } }; store.hotUpdate({ mutations }); store.hotUpdate({ modules: { nested: { state: { count: 0 }, mutations, modules: { a: { state: { count: 1 }, mutations }, b: { state: { count: 2 }, mutations } } }, c: { state: { count: 4 }, mutations } } }); } namespace TestSubscribe { const store = createStore(); const handler = (mutation: Vuex.MutationObject, state: ISimpleState) => { state.count += 1; }; const unsubscribe = store.subscribe(handler); unsubscribe(); } namespace TestLogger { const logger = createLogger({ collapsed: false, transformer: state => state.count, mutationTransformer: m => m }); new Vuex.Store({ state: { count: 1 }, plugins: [logger] }); }