Vuex实践小记

Posted 2020-10-16 Ethan

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\'
    ])    
}