Vuex中store对象的4个属性state，Mutations，Getters，action

素颜马尾好姑娘i 2021-10-15 06:36 734阅读 0赞

## 一、State ##

**Vuex的作用类似全局对象，Vuex 使用单一状态树，用一个对象State包含了整个应用层级的所有状态，你可以理解为这些状态就是一堆全局变量和数据。**  
比如在下面的Store对象里面就给state属性里面添加了一个`count`变量

//创建一个 store
     const store = new Vuex.Store({ 
        //state存储应用层的状态
        state:{ 
            count:5  //总数：5
        }
     });

## 二、Mutations ##

（说白了就是存放对state里面的变量进行操作的相关函数）

> Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation

我们在 `mutations`中定义了一个叫`increment`的函数，函数体就是我们要进行更改的地方

会接受 `state`作为第一个参数，第二个是自定义传参

const store = new Vuex.Store({ 
        //state存储应用层的状态
        state:{ 
            count:5  //总数：5
        },
        mutations:{ 
            increment(state，value){ 
                state.count += value;
            }
        }
     });

当我们在其他组件里面想要调用store对象里的mutations里的函数的时候，如下面的代码所示  
我们在提交commit时候，第一个参数传的increment,就是对应在 mutations中的increment。  
一般通过方法或钩子触发，例如：

methods: { 
       getVal(event) { 
         //获取当前的按键的值
         let value = event.target.dataset.value;
         //通过commit提交一个名为increment的mutation
         this.$store.commit("increment", value);
       }
     }

如果要在其他组件中获取store里的count变量的值，采用`{ {count}}`方式：

export default { 
      computed: { 
          count(){ 
              return this.$store.state.count;
          }
      }
    };

**总结**  
1.increment官方说是type，其实就是注册的事件名  
2.第二个参数可以是单个参数，如果是多个参数，我们则用对象放入，否则会报错

## 三.Getters： ##

> 可以认为，getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等

假设我们要在`state.count`的基础上派生出一个新的状态`newCount`出来，就适合使用我们的 `getters`  
`getters` 接受 `state` 作为其第一个参数，举例如下：

const store = new Vuex.Store({ 
       //state存储应用层的状态
       state:{ 
          count:5  //总数：5
       },
       getters:{ 
          newCount:state => state.count * 3
       }
     });

这样的话，我们在其他组件中可以使用到这个新的变量了，如下所示  
，先在其他组件中使用下面的代码导出newCount变量，然后通过`{ {newCount}}`使用即可

export default { 
      computed: { 
          newCount(){ 
              return this.$store.getters.newCount;
          }
      }
    };

## 四、action： ##

> 用来解决异步流程来改变state数据。  
> 而matution是直接进行同步操作的，如果你在mutations里进行异步操作，你会发现没用，并不会起任何效果  
> 只有通过action=>mutations=>states,这个流程进行操作,具体步骤如下：

export default new Vuex.Store({ 
      //存放数据
      state: { 
        obj: { }, 
      },
      //4.通过commit mutations中的方法来处理
      mutations: { 
        getParam (state,Object) { 
    	   //5.修改state中的数据
           state.obj= Object
        }
      },
      //2.接受dispatch传递过来的方法和参数
      actions: { //我们直接把下面的context当成是上面的mutations属性即可
        getParamSync (context,Object) { 
    	    //处理异步操作
            setTimeout(()=>{ 
    	        //3.通过commit提交一个名为getParam的mutation
    //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
                context.commit('getParam',Object)
            },3000)
        }
      }
    })

然后我们就在其他组件里这么调用就可以了

methods: { 
       getVal() { 
    	  let name= 'xia';
    	  let age= '26';
    	  let sex= 'man';
    	  //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
    	  this.$store.dispatch('getParamSync',{ name,age,sex})
       }
     }

**总结**：这四个属性有点类似于java里面的3层架构模式，state类似于entity层，Mutations类似于dao层，而action类似于service层