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>