vuex#Module TypeScript Examples

The following examples show how to use vuex#Module. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: index.ts    From vue-storefront-1 with MIT License 6 votes vote down vote up 
cmsBlockModule: Module<CmsBlockState, RootState> = {
  namespaced: true,
  state: {
    items: []
  },
  getters,
  actions,
  mutations
}
Example #2
Source File: index.ts    From vue3-cesium-typescript-start-up-template with MIT License 6 votes vote down vote up 
store: Module<ToolbarState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
  modules: {
    nature,
    tool3DTile,
    other,
    draw,
    measure,
    imagery,
  },
}
Example #3
Source File: index.ts    From vue-storefront-1 with MIT License 6 votes vote down vote up 
paymentModule: Module<PaymentState, RootState> = {
  namespaced: true,
  actions: {
    addMethod ({ dispatch }, paymentMethod) {
      Logger.error('The action payment/addMethod has been deprecated please change to checkout/addPaymentMethod')()

      dispatch('checkout/addPaymentMethod', paymentMethod, { root: true })
    },
    replaceMethods ({ dispatch }, paymentMethods) {
      Logger.error('The action payment/replaceMethods has been deprecated please change to checkout/replacePaymentMethods')()

      dispatch('checkout/replacePaymentMethods', paymentMethods, { root: true })
    }
  },
  getters: {
    // @deprecated
    paymentMethods: (state, getters, rootState, rootGetters) => rootGetters['checkout/getPaymentMethods'],
    // @deprecated
    getDefaultPaymentMethod: (state, getters, rootState, rootGetters) => rootGetters['checkout/getDefaultPaymentMethod'],
    // @deprecated
    getNotServerPaymentMethods: (state, getters, rootState, rootGetters) => rootGetters['checkout/getNotServerPaymentMethods']
  }
}
Example #4
Source File: index.ts    From vue3-cesium-typescript-start-up-template with MIT License 6 votes vote down vote up 
store: Module<CesiumDataState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
  modules: {
    jtPrimitive,
  },
}
Example #5
Source File: index.ts    From vue-storefront-1 with MIT License 6 votes vote down vote up 
cmsPageModule: Module<CmsPageState, RootState> = {
  namespaced: true,
  state: {
    items: [],
    current: null
  },
  getters,
  actions,
  mutations
}
Example #6
Source File: index.ts    From vue3-cesium-typescript-start-up-template with MIT License 5 votes vote down vote up 
store: Module<Tool3DTileState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
}
Example #7
Source File: index.ts    From vue-storefront-1 with MIT License 5 votes vote down vote up 
newsletterStore: Module<NewsletterState, any> = {
  namespaced: true,
  state: {
    isSubscribed: null,
    email: null
  },
  getters: {
    isSubscribed: state => state.isSubscribed,
    email: state => state.email
  },
  mutations: {
    [types.NEWSLETTER_SUBSCRIBE] (state) {
      state.isSubscribed = true
    },
    [types.NEWSLETTER_UNSUBSCRIBE] (state) {
      state.isSubscribed = false
    },
    [types.SET_EMAIL] (state, payload) {
      state.email = payload
    }
  },
  actions: {
    async status ({ commit }, email): Promise<boolean> {
      const isSubscribed = await NewsletterService.isSubscribed(email)

      if (isSubscribed) {
        commit(types.SET_EMAIL, email)
        commit(types.NEWSLETTER_SUBSCRIBE)
      } else {
        commit(types.NEWSLETTER_UNSUBSCRIBE)
      }

      return isSubscribed
    },
    async subscribe ({ commit, getters, dispatch }, email): Promise<boolean> {
      if (getters.isSubscribed) return

      const subscribeResponse = await NewsletterService.subscribe(email)

      commit(types.NEWSLETTER_SUBSCRIBE)
      commit(types.SET_EMAIL, email)
      await dispatch('storeToCache', { email })

      return subscribeResponse
    },
    async unsubscribe ({ commit, getters }, email): Promise<boolean> {
      if (!getters.isSubscribed) return

      const unsubscribeResponse = await NewsletterService.unsubscribe(email)
      commit(types.NEWSLETTER_UNSUBSCRIBE)

      return unsubscribeResponse
    },
    async storeToCache (context, { email }) {
      const newsletterStorage = StorageManager.get('newsletter')
      await newsletterStorage.setItem('email', email)
    }
  }
}
Example #8
Source File: state.ts    From vue3-ts-base with MIT License 5 votes vote down vote up 
console: Module<ConsoleStateType, StateType> = {
  namespaced: true,
  ...state
}
Example #9
Source File: index.ts    From master-frontend-lemoncode with MIT License 5 votes vote down vote up 
CartModule: Module<CartState, unknown> = {
  namespaced: true,
  state,
  mutations,
  actions,
  getters,
}
Example #10
Source File: namespaced-helpers.test.ts    From vuex-composition-helpers with MIT License 5 votes vote down vote up 
describe('"createNamespacedHelpers" - generic namespaced helpers', () => {
	let localVue: typeof Vue;

	beforeEach(() => {
		localVue = getLocalVue();
	});

	describe('when created helpers outside of component', () => {
		it('should get getters', () => {
			const value = 'getter-demo' + Math.random();

			const storeModule: Module<any, any> = {
				namespaced: true,
				getters: {
					valGetter: () => value
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const {useGetters} = createNamespacedHelpers('foo');

			const wrapper = shallowMount({
					template: '<div>{{valGetter}}</div>',
					setup() {
						const {valGetter} = useGetters(['valGetter']);
						return {
							valGetter
						}
					}
				},
				{localVue, store}
			);

			expect(wrapper.text()).toBe(store.getters['foo/valGetter']);
			expect(wrapper.text()).toBe(value);
		})

		it('should get strict getters', () => {
			interface ModuleGetter {
				valGetter: string;
			}
			const value = 'getter-demo' + Math.random();

			const storeModule: Module<any, any> = {
				namespaced: true,
				getters: {
					valGetter: () => value
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const {useGetters} = createNamespacedHelpers<any, ModuleGetter>('foo');

			const wrapper = shallowMount({
					template: '<div>{{valGetter}}</div>',
					setup() {
						const {valGetter} = useGetters(['valGetter']);
						return {
							valGetter
						}
					}
				},
				{localVue, store}
			);

			expect(wrapper.text()).toBe(store.getters['foo/valGetter']);
			expect(wrapper.text()).toBe(value);
		})

	})
});
Example #11
Source File: state.ts    From vue3-ts-base with MIT License 5 votes vote down vote up 
app: Module<AppStateType, StateType> = { namespaced: true, ...state }
Example #12
Source File: index.ts    From vue-storefront-1 with MIT License 5 votes vote down vote up 
private static _extendStore (storeInstance: any, modules: { key: string, module: Module<any, any> }[], plugin: any): void {
    if (modules) modules.forEach(store => storeInstance.registerModule(store.key, store.module))
    if (plugin) storeInstance.subscribe(plugin)
  }
Example #13
Source File: state.ts    From vue3-ts-base with MIT License 5 votes vote down vote up 
ModuleTeam: Module<TeamStateType, StateType> = {
  namespaced: true,
  ...state
}
Example #14
Source File: index.ts    From vue3-cesium-typescript-start-up-template with MIT License 5 votes vote down vote up 
store: Module<JTPrimitiveState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
}
Example #15
Source File: index.ts    From master-frontend-lemoncode with MIT License 5 votes vote down vote up 
CartModule: Module<ICartState, unknown> = {
  namespaced: true,
  state,
  actions,
  mutations,
  getters,
}
Example #16
Source File: namespaced-state.test.ts    From vuex-composition-helpers with MIT License 4 votes vote down vote up 
describe('"useNamespacedState" - namespaced store state helpers', () => {
	let localVue: typeof Vue;

	beforeEach(() => {
		localVue = getLocalVue();
	});

	describe('when given store in arguments', () => {
		it('should return a nested state value', () => {
			const nestedStoreModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const storeModule:Module<any, any> = {
				namespaced: true,
				modules: {
					bar: nestedStoreModule
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState(store, 'foo/bar', ['val']);
						return {
							stateVal: val
						}
					}
				},
				{localVue}
			);

			expect(wrapper.text()).toBe(nestedStoreModule.state.val);
		});

		it('should render component using a state value', () => {
			const storeModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState(store, 'foo', ['val']);
						return {
							stateVal: val
						}
					}
				},
				{localVue}
			);

			expect(wrapper.text()).toBe(storeModule.state.val);
		});

		it('should render component using a typed state value', () => {
			interface ModuleState {
				val: string
			};
			const storeModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState<ModuleState>(store, 'foo', ['val']);
						return {
							stateVal: val
						}
					}
				},
				{localVue}
			);

			expect(wrapper.text()).toBe(storeModule.state.val);
		});

		it('should change component contents according a state change', async () => {
			const storeModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState(store, 'foo', ['val']);
						return {
							stateVal: val
						}
					}
				},
				{localVue}
			);

			// original value
			expect(wrapper.text()).toBe(storeModule.state.val);

			// change value, but not yet rendered
			storeModule.state.val = 'new value' + Math.random();
			expect(wrapper.text()).not.toBe(storeModule.state.val);

			// wait for rendering
			await wrapper.vm.$nextTick();

			// now it should be rendered
			expect(wrapper.text()).toBe(storeModule.state.val);
		});

		it('should trigger a watcher according a state change', async () => {
			const watcher = jest.fn();
			const storeModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState(store, 'foo', ['val']);

						watch(val, watcher);

						return {
							stateVal: val
						}
					}
				},
				{localVue}
			);

			expect(watcher).toBeCalledTimes(0);

			storeModule.state.val = 'new value' + Math.random();

			// wait for rendering
			await wrapper.vm.$nextTick();

			expect(watcher).toBeCalledTimes(1);

		});
	});

	describe('when store not given in arguments', () => {
		it('should render component using a state value', () => {
			const storeModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState(undefined, 'foo', ['val']);
						return {
							stateVal: val
						}
					}
				},
				{localVue, store}
			);

			expect(wrapper.text()).toBe(storeModule.state.val);
		});
		it('should render component using a typed state value', () => {
			interface ModuleState {
				val: string;
			};
			const storeModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState<ModuleState>(undefined, 'foo', ['val']);
						return {
							stateVal: val
						}
					}
				},
				{localVue, store}
			);

			expect(wrapper.text()).toBe(storeModule.state.val);
		});

		it('should change component contents according a state change', async () => {
			const storeModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState(undefined, 'foo', ['val']);
						return {
							stateVal: val
						}
					}
				},
				{localVue, store}
			);

			// original value
			expect(wrapper.text()).toBe(storeModule.state.val);

			// change value, but not yet rendered
			storeModule.state.val = 'new value' + Math.random();
			expect(wrapper.text()).not.toBe(storeModule.state.val);

			// wait for rendering
			await wrapper.vm.$nextTick();

			// now it should be rendered
			expect(wrapper.text()).toBe(storeModule.state.val);
		});

		it('should trigger a watcher according a state change', async () => {
			const watcher = jest.fn();
			const storeModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState(undefined, 'foo', ['val']);

						watch(val, watcher);

						return {
							stateVal: val
						}
					}
				},
				{localVue, store}
			);

			expect(watcher).toBeCalledTimes(0);

			storeModule.state.val = 'new value' + Math.random();

			// wait for rendering
			await wrapper.vm.$nextTick();

			expect(watcher).toBeCalledTimes(1);

		});
	});

	describe('when store not given in arguments', () => {
		it('should render component using a state value', () => {
			const storeModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState('foo', ['val']);
						return {
							stateVal: val
						}
					}
				},
				{localVue, store}
			);

			expect(wrapper.text()).toBe(storeModule.state.val);
		});

		it('should change component contents according a state change', async () => {
			const storeModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const store = new Vuex.Store({
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState('foo', ['val']);
						return {
							stateVal: val
						}
					}
				},
				{localVue, store}
			);

			// original value
			expect(wrapper.text()).toBe(storeModule.state.val);

			// change value, but not yet rendered
			storeModule.state.val = 'new value' + Math.random();
			expect(wrapper.text()).not.toBe(storeModule.state.val);

			// wait for rendering
			await wrapper.vm.$nextTick();

			// now it should be rendered
			expect(wrapper.text()).toBe(storeModule.state.val);
		});

		it('should trigger a watcher according a state change', async () => {
			const watcher = jest.fn();
			const storeModule: Module<any, any> = {
				namespaced: true,
				state: {
					val: 'test-demo' + Math.random()
				}
			};
			const store = new Vuex.Store({
				state: {},
				modules: {
					foo: storeModule
				}
			});

			const wrapper = shallowMount({
					template: '<div>{{stateVal}}</div>',
					setup() {
						const {val} = useNamespacedState('foo', ['val']);

						watch(val, watcher);

						return {
							stateVal: val
						}
					}
				},
				{localVue, store}
			);

			expect(watcher).toBeCalledTimes(0);

			storeModule.state.val = 'new value' + Math.random();

			// wait for rendering
			await wrapper.vm.$nextTick();

			expect(watcher).toBeCalledTimes(1);

		});
	});

});