vuex语法糖

vuex语法糖

一：全局使用的vuex变量

1.文件位置

2.文件内容代码
第一块：service下的store下的modules下的user.js

const user = {
  state: {
    userId: '123456789',
    userName: ''
  },
  mutations: {
    SET_USER_ID(state, userId) {
      state.userId = userId
    }
  },
  actions: {
    setUserId({ commit, state }, userId) {
      commit('SET_USER_ID', userId)
    }
  }

}

export default user

第二块：service下的store下的combindModules.js

/**
 * 通过 webpack  require.context 来动态载入vuex store
 * modules目录中的文件名称必须和导出对象名称保持一致
 */
const requireModule = require.context('./modules/', false, /\.js$/)

let modules = {}

requireModule.keys().forEach(fileName => {
  const moduleName = fileName.replace(/(\.\/|\.js)/g, '')
  modules[moduleName] = requireModule(fileName).default
})

export default modules

第三块：service下的store下的getters.js

const getters = {
  // 用户
  userId: state => state.user.userId,
}

export default getters

第四块：plugins下的store.js

import Vue from 'vue'
import Vuex from 'vuex'
// combined modules
import modules from '../service/store/combindModules'
import getters from '../service/store/getters'

Vue.use(Vuex)

export default new Vuex.Store({
  modules,
  getters
})

第五块：vue项目的main.js 将store挂载到vue

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './plugins/store'


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

3.如何使用这些变量

<script>
import { mapGetters, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["userId"]),
  },
  watch: {
    userId(userId) {
      console.log("监听userID", userId);
    },
  },
  mounted() {
    console.log("about mounted", this.userId);// 使用mapGetters语法糖，用this.userId使用这个变量
  },
  methods: {
    ...mapMutations(["SET_USER_ID"]),
    ...mapActions(["setUserId"]),
    changeUserId() {
    // 修改
      this.$store.dispatch("setUserId", "987"); // 推荐使用
      this.$store.commit("SET_USER_ID", "987");
      // 语法糖
      this.setUserId();
      this.SET_USER_ID("012");
    },
  },
};
</script>

二：注册单个模块使用的vuex变量

1.1.文件位置，TestVuex文件夹相当于单个模块

2.文件内容代码
1.store中的store.js

const DepartScreen = {
  namespaced: true,
  state: {
    screenCode: '123456',
  },
  mutations: {

    SET_SCREEN_CODE(state, code) {
      state.screenCode = code
    },

  },
  actions: {
    async setScreenCode({ commit, state }, code) {
      commit('SET_SCREEN_CODE', code)
    }
  }
}
export default DepartScreen

2.store中的index.js

import store from '../../../plugins/store' //全局vuex的store.js文件
import DepartScreen from './store'

export default {
  install() {
    store.registerModule('DepartScreen', DepartScreen)
  },
  uninstall() {
    store.unregisterModule('DepartScreen')
  }
}

3.index.vue

<script>
import DepartScreen from "./Store";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions } = createNamespacedHelpers("DepartScreen");
export default {
  computed: {
    ...mapState(["screenCode"]),
  },
  mounted() {
    console.log("mounted  DepartScreen screenCode", this.screenCode);// 使用
  },

  created() {
    console.log("DepartScreen.install();");
    DepartScreen.install();
  },
  methods: {
    ...mapActions(["setScreenCode"]),
    change() {
      this.setScreenCode("987654321"); //修改
    },
  },
  beforeDestroy() {
    console.log("DepartScreen.uninstall();");
    DepartScreen.uninstall();
  },
  watch: {
    screenCode(val) {
      console.log("监听screenCode", val);
    },
  },
};
</script>