vue使用vuex的来同步状态

概述

  1. 引入依赖
  2. 配置公有vuex
  3. 配置vuex的配置
  4. 页面引入使用

引入依赖

npm 复制代码
npm install vuex@next --save

配置公有vuex

vue 复制代码
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './axios/store'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)

app.use(router)
app.use(store)
app.use(ElementPlus)

app.mount('#app')

配置vuex的配置

js 复制代码
import { createStore } from 'vuex'

const store = createStore({
    state: {
        token: '',
        user: {}
    },
    mutations: {
        token(state, token) {
            state.token = token;
        },
        user(state, user) {
            state.user = user;
        }
    },
    getters: {
        getToken(state) {
            return state.user.token;
        },
        getUser(state) {
            return state.user;
        }
    }
})

export default store;

页面应用

vue 复制代码
<template>
    <div>
        {{ 1 + $store.state.token }} <!-- 使用计算属性 token -->
    </div>
    <Text></Text>
</template>

<script setup>
import Text from './views/test.vue';
import { onMounted, computed } from 'vue';
import { useStore } from 'vuex'

// 在组件挂载时提交 token
onMounted(() => {
    store.commit('token', "fdsfdssfdsfdsfd");
    console.log(store.state.token);
});
</script>
<style scoped></style>
<template lang="">
    <div>
        {{2+ temp}}
    </div>
</template>
<script setup>
import { onMounted, computed, ref } from 'vue';
import { useStore } from 'vuex'
const store = useStore();
const temp = ref(0);
// 在组件挂载时提交 token
onMounted(() => {
    store.commit('token', "f尽快六角恐龙都结束了飞机到是覅sfd");
    console.log(store.state.token);
    temp.value = store.state.token;
});
</script>
<style lang="">

</style>

结果:

1f尽快六角恐龙都结束了飞机到是覅sfd

2f尽快六角恐龙都结束了飞机到是覅sfd

相关推荐
文心快码BaiduComate7 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger7 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer98113 分钟前
基于webpack的场景解决
前端·webpack
华科云商xiao徐20 分钟前
Java并发编程常见“坑”与填坑指南
javascript·数据库·爬虫
奶昔不会射手27 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy31 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy37 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵37 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js