vuex之mutations使用示例

Posted 2022-07-16 cathy1024

在 vuex之state、mutations使用示例 已经简单用过mutations，这一篇更全面去了解一下这个概念。

vuex官方文档对mutations的描述

更改vuex的store中的状态的唯一方法是提交mutation。

你不能直接调用一个mutation handler。这个选项更像是事件注册。要唤醒一个mutation handler，你需要以相应的type调用store.commit方法

看之前文章中的示例代码，

src/components/Login.vue

      // 修改isLogin状态
      this.$store.commit(‘changeLogin‘, true)
      // 修改username状态
      this.$store.commit(‘changeUsername‘, this.username)
      // 修改password状态
      this.$store.commit(‘changePassword‘, this.password)

 

提交载荷

你可以向store.commit传入额外的参数，即mutation的载荷.

这里做一个用到mutation的小栗子

在store.js的state里添加一个count状态

src/store.js

    state: 
     // ...
      count: 0
    ,

mutations里面添加2个操作count的方法，一个用来增加，一个用来重置

src/store.js

    mutations: 
      // ...
      addCount(state, n) 
        state.count += n
      ,
      resetCount(state, data) 
        state.count = data;
      
    

 

回到Home.vue使用count

在计算属性的mapState里添加count

  computed: 
    // ...
    ...mapState(
      isLogin: state => state.isLogin,
      username: state => state.username,
      password: state => state.password,
      count: state => state.count
    ),
    // ...
  ,

在methods里添加两个方法唤醒mutations

  methods: 
    add () 
      this.$store.commit(‘addCount‘, 1)
    ,
    reset () 
      this.$store.commit(‘resetCount‘, 0)
    
  

最后在template里添加count相关内容

    <hr>
    <div>
      <h3>mutation载荷</h3>
      <span>count</span> | <button @click="add">+1</button> | <button @click="reset">重置</button>
    </div>

两个按钮分别调用add和reset事件

运行测试一下

 

 

使用对象形式的载荷也能实现这种效果

很多时候，尤其是当数据比较复杂，使用对象形式的载荷会更好。

修改store.js mutations addCount和resetCount事件

src/store.js

      addCount(state, payload) 
        state.count += payload.n
      ,
      resetCount(state, payload) 
        state.count = payload.data;
      

修改Home.vue methods add和reset方法

src/components/Home.vue

    add () 
      this.$store.commit(‘addCount‘, 
        n: 1
      )
    ,
    reset () 
      this.$store.commit(‘resetCount‘, 
        data: 0
      )
    

效果一样。多学会一种写法总是好的。

 

对象风格的mutation

提交mutation的另一种方式是直接使用包含type属性的对象

结合本例，修改Home.vue

  methods: 
    add () 
      this.$store.commit(
        type: ‘addCount‘,
        n: 1
      )
    ,
    reset () 
      this.$store.commit(
        type: ‘resetCount‘,
        data: 0
      )
    
  

效果一样。

 

Mutation需遵守Vue的相应规则

以下摘自vuex官网

既然Vuex的store中的状态是响应式的，那么当我们变更状态时，监视状态的Vue组件也会自动更新。这也意味着Vuex中的mutation页需要与使用Vue一样遵守一些注意事项

1. 最好提前在你的store中初始化好所需属性
2. 当需要在对象上添加新属性时，你应该
   • 使用Vue.set(obj, ‘newProp‘, 123)，或者
   • 以新对象替换老对象。例如，

　　　　　　state.obj = ...state.obj, newProp: 123

 

 

（未完）