Vuex实践小记

1.目录结构

2.开始（安装vuex）

　　npm install vuex --save

3.编辑store/index.js（创建一个Vuex.store状态管理对象）

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import state from './state'
import mutations from './mutations'
//开发的时候借助这个我们可以在控制台追踪到state更改的各个状态
import creatLogger from 'vuex/dist/logger'

Vue.use(Vuex)

const debug = process.env.NODE_ENV !== 'production'

export default new Vuex.Store({
  actions,
  getters,
  state,
  mutations,
  strict: debug,
  plugins: debug ? [creatLogger()] : []
})

4.编辑store/state.js(也就是添加你要管理的数据)

const state = {
  showSignModel: false,
  currentday: 0,
  chooseClaState: false,
  signState: false,
  awardInfo: {}
}
export default state

5.编辑store/mtations-types.js(这个主要是为了组织代码的时候足够清晰，便于维护，在mutation.js中帮助我们建立映射关系)

const SET_SHOW_SIGN_MODEL = 'SET_SHOW_SIGN_MODEL'
const SET_CURRENT_DAY = 'SET_CURRENT_DAY'
const SET_CHOOSE_CLASS = 'SET_CHOOSE_CLASS'
const SET_SIGN_STATE = 'SET_SIGN_STATE'
const SET_AWARD_INFO = 'SET_AWARD_INFO'
export {
  SET_SHOW_SIGN_MODEL,
  SET_CURRENT_DAY,
  SET_CHOOSE_CLASS,
  SET_SIGN_STATE,
  SET_AWARD_INFO
}

6.编辑store/mutation.js(在vuex中要修改state的的状态或者说值，只能通过mutation去修改，mutation是同步的)

import * as types from './mutation-types'
const mutations = {
  [types.SET_SHOW_SIGN_MODEL] (state, showSignModel) {
    state.showSignModel = showSignModel
  },
  [types.SET_CURRENT_DAY] (state, currentday) {
    state.currentday = currentday
  },
  [types.SET_CHOOSE_CLASS] (state, chooseState) {
    state.chooseClaState = chooseState
  },
  [types.SET_SIGN_STATE] (state, signState) {
    state.signState = signState
  },
  [types.SET_AWARD_INFO] (state, info) {
    state.awardInfo = info
  }
}

export default mutations

7.编辑store/getters.js(通过getters.js我们可以获取state中的状态)

const showSignModel = state => state.showSignModel
const currentday = state => state.currentday
const chooseClaState = state => state.chooseClaState
const signState = state => state.signState
const awardInfo = state => state.awardInfo
export {
  showSignModel,
  currentday,
  chooseClaState,
  signState,
  awardInfo
}

8.如果要同时修改多个状态时，这个时候我们可以将多个mutation封装为一个actions（actions可以一次性提交多个mutation）

import * as types from './mutation-types'

const setSignState = function ({commit, state}, {info, signState}) {
commit(types.SET_AWARD_INFO, info)
commit(types.SET_SIGN_STATE, signState)
}

export {
     setSignState
}

9.在组件中获取状态（在computed获取）

先引入vuex给我们提供的语法糖
import { mapGetters} from 'vuex'
computed: {
    ...mapGetters([
          'signState',
          'awardInfo'
    ])
}
根据状态显示元素
<div class="sign_model" v-show="signState"></div>

10.在组件中修改状态（要记得将vuex提供给我们的依法堂书写在methods下，如下：）

先引入vuex给我们提供的语法糖
import { mapMutations } from 'vuex'
methods: {
   closeMode () {
    // 关闭弹窗
        setTimeout(() => {
             this.hideMode(false)
        }, 2500)
},
    ...mapMutations({
         hideMode: 'SET_SIGN_STATE'
    })
}
        

11.一次性修改多个状态（vuex也给我们提供了actions的语法糖...mapActions）

先引入vuex给我们提供的语法糖
import { mapActions } from 'vuex'
同样也要写在methods下
methods: {
     test () {
          this.setSignState({
              info: obj,
              testState: false
          })
     },
     ...mapActions([
         'setSignState'
    ])
}