vuex 在 uniapp vue2 和 vue3 中的使用（纯代码）

奋进的小羊

于 2024-09-02 11:42:26 发布

阅读量675

点赞数 5

文章标签： uni-app vue.js javascript

本文链接：https://blog.csdn.net/yzzgz/article/details/141815451

版权

VUE2----------------------------------------------------------------------------------------------------------------------------
index.js页面
这个页面是需要在项目根目录下自己新建一个store文件夹，然后在自己新增一个index.js文件的
如图：
在这里插入图片描述

import Vue from 'vue'
import Vuex from 'vuex'

// 把Vuex作为插件,引入到Vue全局实例中
Vue.use(Vuex)

export default new Vuex.Store({
	state:{
		userName:'张三',
		age:25
	}
})

main.js页面

 //检查是否有vuex
 //import vuex from 'vuex'
 //console.log(vuex)

import App from './App'
// 1 引入Vuex路径
import store from './store'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
  ...App,
  // 2 实例化
  store
  
})
app.$mount()
// #endif


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

index.vue页面

<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{title}}</text>
		</view>
		<view class="text-area">
			<text>{{this.$store.state.userName}}</text>
		</view>
		<view class="text-area">
			<text>你已经</text>
			<text>{{this.$store.state.age}}</text>
			<text>岁啦</text>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

VUE2结果
在这里插入图片描述

VUE3----------------------------------------------------------------------------------------------------------------------------
index.js页面
这个页面是需要在项目根目录下自己新建一个store文件夹，然后在自己新增一个index.js文件的
如图：
在这里插入图片描述

import {createStore} from 'vuex'

const store = createStore({
	state:{
		userName:'李四',
		age:20
	}
})
export default store

main.js页面

// 检查是否有vuex
//import vuex from 'vuex'
//console.log(vuex)

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

// #ifdef VUE3
// 1 引入Vuex路径
import store from './store'
import { createSSRApp } from 'vue'
import App from './App.vue'
export function createApp() {
  const app = createSSRApp(App)
  // 2 实例化
  app.use(store)
  return {
    app
  }
}
// #endif

index.vue页面

<template>
	<view>
		<input type="text" value="" placeholder="请输入... ..."/>
	</view>
	<view>
		<text>{{this.$store.state.userName}}</text>
	</view>
	<view>
		<text>你已经</text>
		<text>{{this.$store.state.age}}</text>
		<text>岁了</text>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>