uniapp vue3中vuex的使用

最新推荐文章于 2025-10-11 16:06:07 发布

原创最新推荐文章于 2025-10-11 16:06:07 发布 · 2.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue

本文介绍了如何在Vue应用中使用Vuex进行状态管理，包括创建store、配置state、组件间通信及在SSR中的应用。从新建store文件、定义初始状态到在页面上读取状态，一步步带你理解Vuex的实践过程。

首先在根目录下新建一个store文件夹，并在其中创建index.js，然后引入vuex

这只是使用vuex的一种方法，简单调用一下

import { createStore } from 'vuex'
const store = createStore({
    state:{//存放状态
        "username":"狐狸",
        "age":18
    }
})

export default store

在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
  }
}

在页面中调用

<template>
	<view class="content">
		{{username}}
	</view>
</template>

<script>
	import store from '@/store/index.js'; //需要引入store
	import {
		computed,
		reactive,
		watchEffect
	} from "vue";

	export default {
		data() {
			return {
				title: 'Hello',
				vuexMsg: ''
			}
		},
		onLoad() {
			
		},
		methods: {

		},
		setup() {
			let username = computed(() => {
				return store.state.username
			})

			return {
				username
			}
		}
	}
</script>