DAY9 资料室--Vuex初创Store

前言

前面两篇我们已经大约了解了 Vuex 的运作模式，所以现在让我们来用个简单的例子实际运用看看吧！

初创Store

• 设定 Store
  首先我们来建立一个 store，来控制 LOADING 状态。

export default new Vuex.Store({
  state: {
    isLoading: false
  },
  actions: {
    updateLoading (context, status) {
      context.commit('LOADING', status)
    }
  },
  mutations: {
    LOADING (state, status) {
      state.isLoading = status
    }
  }
})

1. state 中放置一笔名为 isLoading 的资料
2. mutations 中设立 LOADING 方法，以修改 state.isLoading 资料状态
3. actions 中设立 updateLoading 方法，以触发 mutations 中的 LOADING 方法

现在我们的 store 资料与方法都建立好了，那要如何在 Vue 元件中互动呢？

• 与 Vue 元件互动

<template>
  <div id="app">
    <button @click="updateLoading">click</button>
    <h2 v-if="isLoading">isLoading</h2>
  </div>
</template>

<script>
export default {
  name: 'app',
  methods: {
    updateLoading () {
      this.$store.dispatch('updateLoading', true)
    }
  },
  computed: {
    isLoading () {
      return this.$store.state.isLoading
    }
  }
}
</script>

1. 在 methods 中设立 updateLoading 方法，并使用 this.$store.dispatch 方法，触发在 store 中actions 的 updateLoading 方法，并传入值为 true。
2. 在 computed 中设立 isLoading 方法，并使用 this.$store.state.isLoading 得到位於 store 中state 的 isLoading 值。

严格模式

其实在使用 Vuex 有一个重点，就是所有的资料修改都必须透过 mutation，为了预防我们违背了此原则，Vuxe 有提供严格模式来协助我们检查，只要没有符合原则就会跳错。

而严格模式使用上也非常简单哦！

const store = new Vuex.Store({
  // ...
  strict: true
})

• 发布环境时不要使用严格模式
  因为严格模式会深度监测状态树来检测不合规的状态变更，为了避免效能不好，我们在发布的时候记得不要使用严格模式，所以我们可以将程序码调整为这样。

const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})

这样就只会在开发环境使用严格模式罗！