Vuex使用笔记

安装略。。。

1. app.js

const state = {
  ...
  audio: 0,
  ...
}

const mutations = {
  ...
  AUDIO_STATUS: (state, audio) => {
    state.audio = audio
  },
  ...
}

const actions = {
  ...
  audioStatus({ commit }, status) {
    commit('AUDIO_STATUS', status)
  },
  ...

}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

2. index.js

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app' // 引入app.js
import user from './modules/user'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    user,
    tagsView,
    permission,
    settings
  },
  getters
})

export default store

3. 组件中使用

// 修改状态值
this.$store.dispatch('app/audioStatus', 1)

// 监听获取状态值
/* 通过计算属性获取 eg:<FloatBall v-if="audioStatus === 1"></FloatBall>
 * watch中可以获取到状态值进行相关的业务处理
 */
  computed: {
    audioStatus() {
      return this.$store.state.app.audio;
    }
  },
  // watch: {
  //   audioStatus(val) {
  //     return val;
  //   }
  // }