当前位置：首页 > news >正文

uniapp之vuex在vue2和vue3两种模式下前端工程化动态导入文件

news 来源：原创 2024/5/5 1:11:15

由于最近比较忙，两周没写文章了，今天终于挤出点时间来整理素材了。

前端是一个多样化的工作。初学者肯定都是以最简单有效的方式来开发项目，哪怕是多写都没关系。但是随着经验的增多，发现功能模块化很重要，可以直接运在各种项目中。有一次帮朋友改BUG的时候，我发现他的项目很多功能的思路跟我所写是两个不同的级别，于是我就开始学习大佬们的用法，所以才有了后面开发项目的效率。总结出一句话：站在巨人的肩膀上，才可能得更远。

好了话不多说，今天我就整理关于vuex的工程化目录，这个功能不仅实现了vueX的模块化，还避免了一个项目多人开发产生的冲突。

这里主要介绍的是vuex在uniapp中的运用，在脚手架项目中思路是一样的，可供参考。vue2中的vuex工程化可能比较熟悉，在vue3中可能会有些不一样的使用方法，毕竟vue3用的是vite打包编译。

项目store目录结构：

store
- index.js
- getters.js
- modules
  - 各自的功能.js

vuex在vue2中的使用

index.js中的处理

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/);
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
	const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
	const value = modulesFiles(modulePath)
	modules[moduleName] = value.default
	return modules
}, {})
export default new Vuex.Store({
	modules,
	getters:getters
});

功能：set.js

const set = {
	namespaced: true,// 名称是否私有化
	state: {
		num:1
	},
	mutations: {
		SET_NUM(state, data) {
		    state.num = data;
		}
	},
	actions: {
		setNum({ commit }, data) {
			commit('SET_NUM', data);
		}
	}
};
export default set;

getters.js

const getters = {
	num: state => state.set.num
}
export default getters;

main.js

import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	store,
	...App
})
app.$mount()

在组件中的使用

<script>
	export default {
	    onLoad(){
	        console.log(this.$store.getters.num)
	        
	    },
	    methods:{
	        set(){
	            <!--this.$store.dispatch('set/setNum',2);-->// 异步修改
	            this.$store.commit('set/SET_NUM',2)
	        }
	    }
	}
</script>

还有很多用法，我就不一一述说了…

vuex在vue3中的使用

index.js中的处理

import { createStore } from 'vuex';
import getters from '@/store/getters.js';
const modulesFiles = import.meta.globEager('./modules/*.js');
const modules = Object.keys(modulesFiles).reduce((modules, path) => {
	const moduleName = path.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')
	modules[moduleName] = modulesFiles[path]?.default
	return modules
}, {}
)
const store = createStore({
	modules,
	getters
})
export {
	store
}

功能：demo.js
注意： actions中函数接受的参数与vue2中又区别，使用context.commit

const demo = {
	namespaced: true, // 名称是否私有化
	state: {
		n: 1
	},
	mutations: {
		SET_NUM(state, data) {
			state.n = data;
		}
	},
	actions: {
		setNum(context, data) {
			context.commit('SET_NUM', data);
		}
	}
};
export default demo;

getters.js

const getters = {
	num: state => state.demo.n
}
export default getters;

main.js

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
import { store } from './store/index'
export function createApp() {
  const app = createSSRApp(App)
	app.use(store);
  return {
    app
  }
}
// #endif

在组件中的使用

<script setup>
	import { useStore } from 'vuex';
	const store = useStore();
	console.log(store.getters.num);
	console.log(store.state.demo.n);
	function add(){
		<!--store.dispatch('demo/setNum',Math.random());--> // 异步修改
		store.commit('demo/SET_NUM',999);// 同步修改
	}
</script>