uniapp 使用vue3 (第一篇vuex(弃用)， 改用pinia)

记录日常开发的总结,包含vuex,全局方法,http请求,组件等等

一:创建vuex目录

目录结构

store
  -----|    modules
       |--------------------|   app.js
       |--------------------|	im.js
  -----|    index.js

index.js 内容

import app from './modules/app.js'
import im from './modules/im.js'
// #ifndef VUE3
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
	modules: {
		app,
		im
	}
})
// #endif

// #ifdef VUE3
import {
	createStore
} from "vuex";
const store = createStore({
	modules: {
		app
	},
});
export default store;
// #endif

app.js

const state = {
	test: ''
}

const mutations = {
	UPDTEST(state, text) {
		state.test = text
	}
}

const actions = {
	setTest({
		commit
	}, text) {
		commit('UPDTEST', text)
	}
}

const getters = {
	test: state => state.test
}

export default {
	namespaced: true,
	state,
	getters,
	mutations,
	actions
}

二:在main.js挂载

import App from './App'
import store from "./store";
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	app.use(store);
	return {
		app
	}
}

三:在文件中具体使用

刚接触vue3, 欢迎各位大佬提供类似于vue2中的mapGetters语法

<script setup>
	import { computed } from 'vue'
	import { useStore } from 'vuex'
	const store = useStore()
	const getShowTask = computed(() => {
		return store.getters['app/test'];
	})
</script>