vue3使用vuex的存值和取值

最新推荐文章于 2024-08-23 18:51:34 发布

范天缘

最新推荐文章于 2024-08-23 18:51:34 发布

阅读量4.5k

点赞数 1

分类专栏： vue3 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_42821697/article/details/121850005

版权

vue3 专栏收录该内容

36 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何在Vue应用中使用Vuex进行状态管理。通过创建一个store.js文件，定义了`passwordState`的状态和`setPasswordState`的mutation来修改状态。在具体的页面中，利用`onMounted`生命周期钩子获取并修改Vuex状态，展示了如何在组件中调用Vuex的mutation来改变全局状态。

摘要由CSDN通过智能技术生成

这里我只用到了state和mutations

1.vuex文件 store.js

state: {
   passwordState:false,//登录状态
},
mutations:{
// 设置修改登录状态的方法
setPasswordState(state,value){
    state.passwordState = value; 
 },
}

2.具体操作页面

import { onMounted } from 'vue'
import { useStore } from 'vuex'
export default {
   setup(){
     //把useStore赋值
     const $store = useStore();
     onMounted(()=>{
        //拿到vuex的值
        console.log($store.state.passwordState) // false
        //改变vuex的值
        $store.commit('setPasswordState',true) //调用vuex的方法
        //再次打印
        console.log($store.state.passwordState) // true
     })
     return{
     
     }
   }
}