踩坑日记 uniapp Vue3 setup 语法糖 vuex 的配置 其他人写的都是垃圾 看了两小时的 csdn 最后自己终于试出来了

其他人写的都是垃圾，看了两小时的 csdn 最后自己终于试出来了

• store文件夹
  • modules.js
    • cart.js
    • my.js
  • index.js

具体配置

• index.js

// 这里千万不要引入 import { createApp } from 'vue' 和 Vue.use(Vuex)
import { createStore } from 'vuex'
import cart from "@/store/modules/cart.js"
import my from "@/store/modules/my.js"
export default createStore({
	modules: {
		cart,
		my
	}
})
1
2
3
4
5
6
7
8
9
10

• cart.js

const getDefaultState = () => {
  return {
    // token: getToken(),
    name: 'aaaaa',
  }
}

const state = getDefaultState()
export default {
  state
}
1
2
3
4
5
6
7
8
9
10
11

• mian.js

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
import { createApp } from 'vue'
import store from 'store/index.js'
const app = createApp(App)	// 创建 app
app.use(store)			// 挂载 store
app.mount('#app')	
// Vue.config.productionTip = false
// #endif

// #ifdef VUE3
import {
	createSSRApp
} from 'vue'
export function createApp() {
	const app = createSSRApp(App)
	return {
		app
	}
}
// #endif
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

• cart.vue

<script setup>
	import store from '@/store/index.js'
	console.log(store.state.cart.name);	// 直接可以访问 当然也可以使用计算属性
</script>
1
2
3
4