Store模式+Vuex模式入门

野性酷女 2023-09-27 11:14 133阅读 0赞

博主简介：本人属于前端小白，在本科期间学过Css、Html、Js,但是只学过一般的vue基础语法，然后参加了老师的一个项目，基于ruoyi框架搭起来的一个系统，但是不是很了解其中的很多内容，因此，在这里低一些其中涉及到的关键技术点重新学习，在这里记录一下！！

1.Store模式：  
大型项目中一般使用vuex作为数据存储。但是小项目中存储几个共用数据大可不必使用。使用官方建议的简单store模式实现父组件和兄弟子组件的数据通信，保证状态统一。其实vuex的基础也就是Store模式！  
个人理解：其实相当于Store是一个大容器，然后存放了公共变量，一旦某个组件改变了这里面的某个值，那么其他组件引用这个变量的都要改变！！能够实现一部分状态需要在多个组件实例间共享！！  
公共变量：  
![在这里插入图片描述][7fb94c570ee44af8afb5635df513a1a2.png]  
这个是StoreTest1  
![在这里插入图片描述][9b6b65db12e54e09b96b496ebbdfa6bb.png]  
这个是StoreTest2  
![在这里插入图片描述][e2c36ce3260a4c948c0c8853d8d20323.png]

当我点击Storel练习的测试练习1那个按钮，  
![在这里插入图片描述][72d051516ec4442bb77ee42b08502732.png]

![1f11289e1b75471ea8b4cf777b38bc2d.png][]  
这时候再打开看Store练习2，你会发现：他的这两个值也变了  
![在这里插入图片描述][3db0aca241d14f51af191287a3f8d0fb.png]  
到这里已经很明白了，其实Store原理类似于java对象中set、get方法！！  
1.Vuex使用来干什么的？？  
我们的组件树构成了一个巨大的“视图”，不管在树的哪个位置，任何组件都能获取状态或者触发行为。通过定义和隔离状态管理中的各种概念并通过强制规则维持视图和状态间的独立性，我们的代码将会变得更结构化且易维护。这就是 Vuex 背后的基本思想。

2.其实vuex的入门特别简单，其实主要就是state、mutation、action、getters、modulesz这五部分！！  
其中关于这五部分的详细介绍，我看了很多博客，这篇是我看的最详细，然后我跟着敲了一遍，然后没发现问题的，给大家一个连接：https://blog.csdn.net/friggly/article/details/123637237?utm\_medium=distribute.pc\_relevant.none-task-blog-2defaultbaidujs\_baidulandingword~default-0-123637237-blog-125155540.t5\_refersearch\_landing&spm=1001.2101.3001.4242.1&utm\_relevant\_index=3  
这篇文章写得特别详细，但是唯一没中不足的是没有介绍到modules模块这一部分！！  
![在这里插入图片描述][fa61588c1d7b4d10ba9c14ef3d5a3968.png]  
对于模块这一部分，我又在其他地方查询了一些内容：  
其实利用模块最大的好处就是各种module组合起来更加的简洁，不容易乱，拆分模板，把复杂的场景按模块来拆开！！！

export default new Vuex.Store({
        
      // state: 用来保存所有的公共数据
      state: {
        },
      getters: {
        },
      mutations: {
        },
      actions: {
        },
      modules: {
        
        模块名1： {
        
                // namespaced为true，则在使用mutations时，就必须要加上模块名
            namespaced: true, 
              state: {
        },
                getters: {
        },
                mutations: {
        },
                actions: {
        },
                modules: {
        }
        }，
        模块名2： {
        
            // namespaced不写，默认为false，则在使用mutations时，不需要加模块名
              state: {
        },
                getters: {
        },
                mutations: {
        },
                actions: {
        },
             modules: {
        }
        }  
      }
    })
    复制代码

自己敲的案例：

modules: {
        
        model1:{
        
          namespaced:true,
            state:{
        countModel:0},
            mutations:{
        
              addTest(state){
        
                    //变更状态
                  console.log("测试后")
                    state.countModel++
                },
            }
        },
          model2:{
        
              namespaced:false,
              state:{
        countModel:0},
              mutations:{
        
                  addmodel2(state){
        
                      //变更状态
                      console.log("进入测试2了")
                      state.countModel++
                  },
                  addmodel2N(state,step){
        
                      //变更状态
                      console.log("进入测试2了")
                      state.countModel+=step
                  },
              }
          },
      }

vue的Template调用不同Modules的值！

//测试不同Modules的内容值
                M1testStoreN(){
        
                    this.$store.commit('model1/addTest')
                },
                M2testStoreN(){
        
                    this.$store.commit('addmodel2N',5)
                },

注意的那个namespaced的使用，然后注意什么时候加model的名字，什么什么时候不加，只要掌握了这些差不多，vuex基本上易经入门了！！  
这里在给大家一篇关于vuex的介绍的：https://blog.csdn.net/m0\_70477767/article/details/125155540，在这篇文章只看modules部分就可以了！！！大家可以结合我买那个小案例！！  
然后还有vuex的官方网站：https://vuex.vuejs.org/zh/guide/modules.html\#%E6%A8%A1%E5%9D%97%E9%87%8D%E7%94%A8  
文章完结！！  
![在这里插入图片描述][357de8d259534a979a489a21c6fdc001.png]

[7fb94c570ee44af8afb5635df513a1a2.png]: https://img-blog.csdnimg.cn/7fb94c570ee44af8afb5635df513a1a2.png
[9b6b65db12e54e09b96b496ebbdfa6bb.png]: https://img-blog.csdnimg.cn/9b6b65db12e54e09b96b496ebbdfa6bb.png
[e2c36ce3260a4c948c0c8853d8d20323.png]: https://img-blog.csdnimg.cn/e2c36ce3260a4c948c0c8853d8d20323.png
[72d051516ec4442bb77ee42b08502732.png]: https://img-blog.csdnimg.cn/72d051516ec4442bb77ee42b08502732.png
[1f11289e1b75471ea8b4cf777b38bc2d.png]: https://img-blog.csdnimg.cn/1f11289e1b75471ea8b4cf777b38bc2d.png
[3db0aca241d14f51af191287a3f8d0fb.png]: https://img-blog.csdnimg.cn/3db0aca241d14f51af191287a3f8d0fb.png
[fa61588c1d7b4d10ba9c14ef3d5a3968.png]: https://img-blog.csdnimg.cn/fa61588c1d7b4d10ba9c14ef3d5a3968.png
[357de8d259534a979a489a21c6fdc001.png]: https://img-blog.csdnimg.cn/357de8d259534a979a489a21c6fdc001.png