---
# System prepended metadata

title: '[vue] Vuex'
tags: [VUE]

---

---
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
```javascript=
// updateLoading 定義於actions
vm.$store.dispatch('updateLoading', true);
```
- store/index.js
```javascript=
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
```javascript=
strict: true,
```
![](https://i.imgur.com/kIUMrOt.png)
![](https://i.imgur.com/1veEVcv.png)


# 模組化應用
```javascript=
namespaced: true //actions, mutations getters 變成區域變數
```
```javascript=

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

modules: {
    productsModules,
}
```