---
tags: VUE
---
# [vue] Vuex
[中文說明](https://vuex.vuejs.org/zh/)
## Actions
> 不要在此處修改資料
- commit: context.commit to commit a mutation
- dispatch: call other actions with context.dispatch
- getters: context.getters
## Mutations
> 不要在此處執行非同步行為
## Examples
#### actions & mutations
- 元件.vue

// updateLoading 定義於actions
vm.$store.dispatch('updateLoading', true);

- store/index.js

export default new Vuex.Store({
  strict: true,
  state: {
    isLoading: false,
  },
  actions: {
    // context , payload
    updateLoading(context, status) {
      setTimeout(() => {
        context.commit('LOADING', status);
      }, 1000);
    },
  },
  mutations: {
    LOADING(state, status) {
      state.isLoading = status;
    },
  },
});

## 嚴僅模式
- store/index.js

strict: true,


# 模組化應用

namespaced: true //actions, mutations getters 變成區域變數

...mapGetters('productsModules', ['...', '...'])

modules: {
    productsModules,
}