Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

1. 创建一个 store

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    num: 0
  },
  getters: {
    num: state => state.num
  },
  mutations: { // mutation 必须同步执行
    addNum(state) {
      state.num ++
    },
    changeNum(state, data) {
      state.num = data
    }
  },
  actions: { // 触发mutations，可以执行异步操作
    addNum(store) {
      setTimeout(() => {
        store.commit('addNum')
      }, 1000)
    },
    changeNum(store, data) {
      store.commit('changeNum', data)
    }
  }
})
export default store

2.引入store

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

new Vue({
  el: '#app',
  store,
  template: '<App/>',
  components: { App }
})

3.页面使用

读取状态

// 通过计算属性获取
computed: {
    num() {
        return this.$store.state.num
    }
}

// 或者通过 mapGetters 函数获取
// store/index.js
getters: {
  num: state => state.num
},
// 组件内
import { mapState } from 'vuex'

computed: {
  ...mapGetters([
    'num'
  ])
}

修改状态

// 组件内
this.$store.commit('addNum')
// 或者
this.$store.dispatch('addNum')