vue3.0 Vuex模块化管理

ゝ一纸荒年。 2022-12-15 02:49 233阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70_pic_center]

## 模块代码 ##

export default{
        namespaced: true,
        state: {
            token:'1111111111111111111111111111'
        },
        mutations: {
        },
        actions: {
        },
       
    }

## store的index.js ##

import Vuex from 'vuex'
    import persistedstate from 'vuex-persistedstate';
    import user from './modules/user'
    import aa from './modules/aa'
    export default Vuex.createStore({
      //持久化   默认localhost   换成sesstion
      plugins: [persistedstate({
        storage: window.sessionStorage
      })],
      //模块导入
      modules:{
        user,
        aa
      },
      state: {
        tt:'clmsadlkmcklasmlckmnsalcnlskdmcl;msalkcjsd;klncksdnkjc'
      },
      mutations: {
      },
      actions: {
      },
    });

## 使用 ##

import router from '@/router/index'
    import { computed, getCurrentInstance  } from 'vue'
    //引入useStore
    import { useStore} from 'vuex'
    export default {
      setup(props,context){
        //执行useStore函数
        const store = useStore();
        console.log(store.state.aa.name)
        let clickHandl = () =>{
          //触发mutations
          store.commit('aa/setName',"改变后的name值")
          console.log(store.state.aa.name)
        }
        return{
          clickHandl,
        }
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Byb2dyYW1tZXJ3aGl0ZQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/81aba299d17d43b0a88e3a5054a07f0b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，233人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue状态管理vuex

方网站：https://vuex.vuejs.org/zh/ 项目中安装vuex npm install vuex -S 在项目的src目录下新建一个目录s...

我会带着你远行/ 2024年04月20日 08:34/ 0 赞/ 112 阅读

相关 vuex状态持久化管理

uex可以进行全局的状态管理，但刷新后刷新后数据会消失，这是我们不愿意看到的。怎么解决呢，我们可以结合本地存储做到数据状态持久化，也可以通过插件vuex-persiste...

亦凉/ 2024年04月19日 09:35/ 0 赞/ 90 阅读

相关 VueX使用备忘(含Vuex实例和Vuex模块化)

文章目录 VueX使用备忘 1. Vuex 介绍 2. Vuex 插件的安装 3. Vuex环境的搭建

水深无声/ 2024年03月30日 15:52/ 0 赞/ 130 阅读

相关 Vue状态管理(Vuex)

浅谈Vuex Question:Vuex状态管理跟使用传统全局变量有什么不同之处呢？ Answer： 1.Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex

谁践踏了优雅/ 2023年02月21日 11:46/ 0 赞/ 45 阅读

相关 vue3.0 Vuex模块化管理

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

ゝ一纸荒年。/ 2022年12月15日 02:49/ 0 赞/ 234 阅读

相关 vuex 模块化应用

1.目录结构 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAd3dmMTIyNQ_size_62_c

客官°小女子只卖身不卖艺/ 2022年09月08日 13:51/ 0 赞/ 202 阅读

相关 Vue状态管理——Vuex

文章目录 1、序言 2、安装Vuex 3、基本用法 3.1 mutation 3.1.1 提交载荷（Payload）

男娘i/ 2022年08月31日 15:17/ 0 赞/ 355 阅读

相关 Vuex 模块化实现待办事项的状态管理

在vue里，组件之间的作用域是独立的，父组件跟子组件之间的通讯可以通过prop属性来传参，但是在兄弟组件之间通讯就比较麻烦了。比如A组件要告诉一件事给B组件，那么A就要先告诉他

朱雀/ 2022年06月17日 13:24/ 0 赞/ 276 阅读

相关 Vuex状态管理之模块化（精华总结）

Vuex.store中有一个modules属性：官方api文档：[https://vuex.vuejs.org/zh/api/\modules][https_vuex.vuej

小咪咪/ 2021年09月17日 19:20/ 0 赞/ 395 阅读

相关 vue中使用vuex(状态管理)模块管理

1.安装依赖 npm install vuex --save mutations同步改变数据思路：state定义数据，getters和computed类似

男娘i/ 2021年09月02日 08:27/ 0 赞/ 682 阅读