标签：对象 rop info get log pst change 全面 alt
在 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的另一种方式是直接使用包含type属性的对象
结合本例，修改Home.vue
methods: { add () { this.$store.commit({ type: ‘addCount‘, n: 1 }) }, reset () { this.$store.commit({ type: ‘resetCount‘, data: 0 }) } }
效果一样。
以下摘自vuex官网
既然Vuex的store中的状态是响应式的，那么当我们变更状态时，监视状态的Vue组件也会自动更新。这也意味着Vuex中的mutation页需要与使用Vue一样遵守一些注意事项
- 最好提前在你的store中初始化好所需属性
- 当需要在对象上添加新属性时，你应该
- 使用Vue.set(obj, ‘newProp‘, 123)，或者
- 以新对象替换老对象。例如，
state.obj = { ...state.obj, newProp: 123 }
（未完）
标签：对象 rop info get log pst change 全面 alt
原文地址：https://www.cnblogs.com/cathy1024/p/11359663.html
