vuex从入门到入土

标签：form   getter   pmu   day   mount   map   rom   cti   menu   

声明大哥store

import { createStore } from ‘vuex‘
import mutations from ‘./mutations‘
import getters from ‘./getters‘
import actions from ‘./actions‘
import storage from ‘./../utils/storage‘
import testModules from ‘./../modules/testModules‘
const state = {
  userInfo: storage.getItem(‘userInfo‘) || {},
  menuList: storage.getItem(‘menuList‘) || [],
  actionList: storage.getItem(‘actionList‘) || [],
  test: 1
}
export default createStore({
  state,
  mutations,
  getters,
  actions,
  modules: {
    testModules
  }
})

大哥store的具体组成

state 可以独立成文件export导出，也可以像我上面一样直接写在里面
mutations

import storage from ‘./../utils/storage‘
export default {
  saveUserInfo(state, userInfo) {
    state.userInfo = userInfo
    storage.setItem(‘userInfo‘, userInfo)
  },
  saveUserMenu(state, menuList) {
    state.menuList = menuList
    storage.setItem(‘menuList‘, menuList)
  },
  saveUserAction(state, actionList) {
    state.actionList = actionList
    storage.setItem(‘actionList‘, actionList)
  },
  saveTest(state, test) {
    state.test = test
  }
}

getters

export default {
  getUserInfo(state) {
    return state.userInfo
  },
  getUserMenu(state) {
    return state.menuList
  },
  getUserAction(state) {
    return state.actionList
  },
  getTest(state) {
    return state.test
  }
}

actions

export default {
  setTest({ commit, state }, payload) {
    commit(‘saveTest‘, payload)
  }
}

大哥的小弟模块

const testModules = {
  namespaced: true,
  state: () => ({
    length: 1
  }),
  getters: {
    getLength: (state) => {
      return state.length
    }
  },
  mutations: {
    setLength(state, payload) {
      state.length = payload
    }
  },
  actions: {
    pacthSetLength({ commit, rootState }, payload) {
      console.log(‘rootState‘, rootState)
      commit(‘setLength‘, payload)
    }
  }
}
export default testModules

接下来就是实战部分了

import { mapActions, mapGetters, mapMutations, mapState } from ‘vuex‘
  computed: {
    dateRange: {
      get: function () {
        return [this.params.stime, this.params.etime]
      },
      set: function (newValue) {
        this.params.stime = dayjs(newValue[0]).format(‘YYYY-MM-DD‘)
        this.params.etime = dayjs(newValue[1]).format(‘YYYY-MM-DD‘)
      }
    },
    ...mapState([‘test‘]),
    ...mapState(‘testModules‘, [‘length‘])
  },
  methods: {
    ...mapGetters([‘getTest‘]),
    ...mapMutations([‘saveTest‘]),
    ...mapActions([‘setTest‘]),
    ...mapGetters(‘testModules‘, [‘getLength‘]),
    ...mapMutations(‘testModules‘, [‘setLength‘]),
    ...mapActions(‘testModules‘, [‘pacthSetLength‘])
  },
  mounted() {
    console.log(‘getTestlog---‘, this.$store.getters.getTest) //测试大哥正常语法的getters
    console.log(‘testlog‘, this.test) //测试大哥骚操作的test值
    console.log(‘length‘, this.length) //测试小弟的length值
    console.log(‘getTest1‘, this.getTest()) //测试大哥骚操作的getters
    this.setTest(‘33‘) //测试大哥action
    console.log(‘getTest2‘, this.getTest()) //测试大哥的getters
    this.saveTest(‘44‘) //测试大哥的mutations
    console.log(‘getTest3‘, this.getTest()) //测试大哥的getters
    console.log(‘--------------------------‘)
    console.log(‘this.getLength()‘, this.getLength()) //测试小弟的getters
    console.log(‘this.setLength‘, this.setLength(‘12‘))//测试小弟的mutations
    console.log(‘this.getLength()‘, this.getLength())//测试小弟的getters
    console.log(‘this.pacthSetLength()‘, this.pacthSetLength(‘99‘)) //测试小弟的actions
    console.log(‘this.getLength()‘, this.getLength())  //测试小弟的getters
    //getters感觉一般都是在computed里面
  }

vuex从入门到入土

标签：form   getter   pmu   day   mount   map   rom   cti   menu   

原文地址：https://www.cnblogs.com/lceihen/p/14939313.html