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

以你之姓@ 2023-02-16 05:48 19阅读 0赞

### 一，vuex使用方法  ###

在store.js页面使用vuex

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {//类似data
      isCollapse:  JSON.parse(sessionStorage.getItem('isCollapse')) || false,
        count:10  //定义了一个参数count值为10
      },
      getters:{//类似computed
      isCollapse:state=>state.isCollapse,
       count:state=>state.count+10  //计算参数count值加10
      },
      mutations: {//类似methods
    
        setCount(state,value){//定义setCount方法
           state.count =value;
           console.log(state.count);
        },
    setCollapse(state){
          state.isCollapse=!state.isCollapse;
          sessionStorage.setItem('isCollapse', JSON.stringify(state.isCollapse));
        
        }
      },
      actions: {
      setMenuStatus(content,data){
          console.log(content);
          content.commit('setCollapse');
        }
      },
      modules: {
      }
    })

打印出actions里面的content可以发现就是我们上面的方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70][]

在index.vue调用

export default {
      name: "index",
      data() {
        return {
        };
      },
      created() {
     
        console.log(this.$store.state.count );// 10
        console.log(this.$store.getters.count );//20
        this.$store.commit('setCount',2000);//2000
     this.$store.dispatch('setMenuStatus')//false
      },
      methods: {
       
      }
    };

### 二，基本内容讲解  ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2][]

### 三，怎么模块化管理vuex ###

![20200609154442543.png][]

在我们的store文件下，index.js文件放主要内容，然后再创建一个modules文件用来放你的vuex模块

### 写法1， ###

index.js文件：

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    
    import app from './modules/app.js';//引入所需模块
    
    export default new Vuex.Store({
      state: { 
      },
      getters:{ 
      },
      mutations: { 
      },
      actions: {
      },
      modules: {
        app,//引用模块
         
      }
    
    })

app.js文件：

在你所需要的页面调用app.js所写内容，如下：

其中我们需要注意到要添加你的模块名.app

![20200609155210532.png][]

### 写法2，vuex命名空间，多模块开发 ###

我们的模块也可以这样子来写，现在里面有一个login.js和app.js两个模块

如果我们这两个模块方法都是一样的，如下所示，我们应该怎么来调用和区分呢？

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3][]

这里要注意 **通过namespaced: true属性设置****命名空间**,不然就会报错

![20200609165022889.png][]

### 调用：  ###

这个时候就需要在要调用的方法里面加上你在index.js文件引入时的模块命名

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 4][]

页面调用：在调用方法之前加上相应模块名，区分你是那个模块引入的，其它不变

![20200609164801545.png][]

这样子设置的优点在于我们也可以更加直观的知道自己是在那个模块引入的方法，便于我们开发。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200609144951200.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200609154202461.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200609154223828.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20200609154442543.png]: https://img-blog.csdnimg.cn/20200609154442543.png
[20200609155210532.png]: https://img-blog.csdnimg.cn/20200609155210532.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2020060916545684.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20200609165022889.png]: https://img-blog.csdnimg.cn/20200609165022889.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200609170343122.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2FzdGVyaWFW,size_16,color_FFFFFF,t_70
[20200609164801545.png]: https://img-blog.csdnimg.cn/20200609164801545.png