uniapp 中使用 vuex,vue2 和 vue3 的区别

追格官方小助手/ 2023年01月18日/ 小程序/ 浏览 3567

在 uniapp 中使用 vuex,需要将 vuex 注入到每一个组件。


1. 新建 store 目录,在此目录下新建 index.js 文件


vue2:


// 页面路径:store/index.js 
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);//vue的插件机制

//Vuex.Store 构造器选项
const store = new Vuex.Store({
	state:{//存放状态
		"username":"foo",
		"age":18
	}
})
export default store


vue3:


// 页面路径:store/index.js
import { createStore } from 'vuex'
const store = createStore({
	state:{//存放状态
		"username":"foo",
		"age":18
	}
})

export default store


2. 在 main.js 中导入文件。


vue2:


// 页面路径:main.js
import Vue from 'vue'
import App from './App'
import store from './store'

Vue.prototype.$store = store

// 把 store 对象提供给 “store” 选项,这可以把 store 的实例注入所有的子组件
const app = new Vue({
	store,
	...App
})
app.$mount()


vue3:


// 页面路径: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
	}
}


发表评论

暂无评论,抢个沙发...

客服 工单