[Vue] Vuex 使用


概念性的東西先跳過,這篇主要紀錄使用到的語法。

Store 基本用法:

state: {
  // 資料
  msg: '',
},
mutations: {
  // 接收 action,改變 state,為同步 function
  setMsg (state, newValue) {
    state.msg = newValue
  },
},
actions: {
  // 行為,可為非同步
  changeMsg ({ commit }) {
    setTimeout(function() {
      // 呼叫 mutation,使用 store.commit 方法
      commit('setMsg', 'hello world');
  }, 2000);
}
  • 在根目錄引入 (Vue.use(Vuex)) 之後,子組件可以直接使用 this.$store.state取得 state。
  • 可以直接在 method 中送出 commit (實務上不建議,建議統一管理)。
methods: {
  handleChange: function() {
    this.$store.commit('setMsg', this.aboutMsg);
  }
}
  • 可以使用 mapActions 使用 store 中的 action。
methods: {
  ...mapActions([
    'getHeadlines',
  ])
}
// map 完可直接使用 this.getHeadlines()

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *