Vuex簡單上手

Vuex

Vuex是Vue.js應用的狀態管理模式
目前開發項目中，主要用於保存組件狀態，保證兄弟組件間的通信。

首先在main.js中引入store

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

下面展示store.js代碼

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  // 保存狀態容器
  state: {
    isCollapse: false  // 這裏保存側邊欄是否摺疊的狀態
  },
  // 類似於組件的computed屬性
  getters: {
    curIsCollapse: (state) => {
      return state.isCollapse
    }
  },
  // 更新狀態（提交mutations方法，無法完成異步操作）
  mutations: {
    // payload爲用戶自定義傳參
    changeIsCollapse (state, payload) {
      state.isCollapse = !state.isCollapse;
      console.log('這是用戶自定義參數' + payload)
    }
  },
  // 異步更新狀態（分發mutations中方法完成）
  actions: {
    changeIsCollapseAsync (context, payload) {
    // 2s後提交changeIsCollapse方法（payload爲用戶自定義傳參）
    setTimeout( () => {
      context.commit( 'changeIsCollapse ', payload );  
      },2000)
  }
})

使用mutations或actions更新狀態

export default {
  methods: {
    changeIsCollapse () {
      // 提交changeIsCollapse方法修改狀態
      this.$store.commit('changeIsCollapse')  
    },
    changeIsCollapseAsync () {
      // 分發actions中的changeIsCollapseAsync 異步函數（提交自定義參數4399）
      this.$store.dispatch('minusPriceAsync', 4399)  
    }
  }
}

在template中使用狀態

<div class="sidebar" :class="{ collapse: $store.state.isCollapse }">
</div>