vuex基本使用之Module

梦里梦外; 2023-06-24 11:25 34阅读 0赞

## vuex中使用module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。 ##

1、模块内部的数据：①内部state，模块内部的state是局部的，也就是模块私有的，比如是addRoutes.js模块state中的count数据，我们要通过**this.$store.state.addRoutes.count**获取

2、内部getter、mutation和action，仍然注册在全局命名空间内，这是为了多模块可以同时响应同一mutation而通过**this.$store.state.count**的结结果是**undefined**

addRoutes.js

const addRoutes = {
            state: {
                    count: 1111
            },
            mutations: {
                    increment(state) {
                            state.count++
                    }
            }
    
    }
    export default addRoutes

store.js

import Vue from 'vue'
    import Vuex from 'vuex'
    import addRoutes from './addRoutes'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      modules: {
        addRoutes
      }
    })
    
    export default store

test.vue

methods: {           
          search() {            
               this.$store.commit('increment');    
                console.log("aaaaaa:" + this.$store.state.count) // ->undefined，未定义
               console.log("aaaaaa:" + this.$store.state.addRoutes.count) // -> 1112          
               this.pageNum = 1;
               this.getData(this.select_word)
           }
    }

发表评论取消回复

表情：

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

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

相关阅读

相关 vuex module总结

vuex module总结 // 创建store文件夹然后在store文件夹下创建对应的js文件 // 在该js文件中引入对应的依赖文件 imp

深藏阁楼爱情的钟/ 2023年06月30日 06:49/ 0 赞/ 29 阅读

相关 vuex基本使用之Module

vuex中使用module：可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。 1、模块内部的数据：①内部

梦里梦外;/ 2023年06月24日 11:25/ 0 赞/ 35 阅读

相关 vuex基本使用方法讲解， modules模块管理状态数据

一，vuex使用方法在store.js页面使用vuex import Vue from 'vue' import Vuex from 'vuex'

以你之姓@/ 2023年02月16日 05:48/ 0 赞/ 19 阅读

相关 vuex之store的基本使用

一、Vuex Store介绍 1、vuex带来的好处：组件之间数据共享组件中数据持久化使用 Vuex 可用使数据流变得清晰、可追踪、可预测

た入场券/ 2022年11月29日 05:33/ 0 赞/ 394 阅读

相关 vuex之module-模块组（六）

当应用非常复杂，状态非常多的时候，需要将store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块，

骑猪看日落/ 2022年10月02日 06:52/ 0 赞/ 53 阅读

相关 Vuex的基本使用

相对于vuex来说，我看了一上午都没看懂，后来通过百度别人的Demo和反复查阅官方文档终于大概了解vuex的主要用法，关于概念什么的就不多说了，直接看官网的更详细：http

r囧r小猫/ 2022年06月15日 12:51/ 0 赞/ 249 阅读

相关 vuex基本使用

今天试了一下Vuex,感觉跟Redux的实现思想类似。再此，简单地总结一下。什么是Vuex 在Vue中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候

叁歲伎倆/ 2022年06月01日 01:44/ 0 赞/ 251 阅读

相关 vuex 基本使用总结

使用 1. 在 Vue 的单页面应用中使用，需要使用Vue.use(Vuex)调用插件。 2. 使用非常简单，只需要将其注入到Vue根实例中。 mport

古城微笑少年丶/ 2022年05月27日 00:25/ 0 赞/ 257 阅读

相关 Vuex的基本使用

一、基本用法 1、使用 1. 安装vuex依赖包 npm i vuex - save 1. 导入vuex包 \[ store / index.js \]

今天药忘吃喽~/ 2021年07月25日 21:59/ 0 赞/ 619 阅读

相关 vuex modules

export default new Vuex.Store({ //存储数据 state:{ },

叁歲伎倆/ 2021年07月24日 15:28/ 0 赞/ 373 阅读