• Welcome to the world's largest Chinese hacker forum

    Welcome to the world's largest Chinese hacker forum, our forum registration is open! You can now register for technical communication with us, this is a free and open to the world of the BBS, we founded the purpose for the study of network security, please don't release business of black/grey, or on the BBS posts, to seek help hacker if violations, we will permanently frozen your IP and account, thank you for your cooperation. Hacker attack and defense cracking or network Security

    business please click here: Creation Security  From CNHACKTEAM

Recommended Posts

改变Vuex商店状态的唯一方法是提交一个突变。Vuex中的突变与事件非常相似:每个突变都有一个字符串和回调函数(处理程序)的事件类型。

接下来,我们以上一篇文章中存储在state中的count为例,看看如何通过变异来修改state的count属性。

利用commit来触发mutation函数

将count的Add函数添加到变异函数中。

一个

2

常量突变={

addNum(州){

状态编号

},

添加(状态){

state.count=2

}

}

导出默认突变

利用变异实现构件中的堆栈器

一个

2

10

11

12

13

14

15

16

17

18

19

20

21

22

模板

divclass='突变'

p{{ count }}/p

button @click='addCount '添加/button

/div

/模板

脚本

> import store from '@/store/store' export default {   computed: {     count () {       return this.$store.state.count     }   },   methods: {     addCount () {       store.commit('add')     }   } } </script>

Mutation的载荷(payload)

你可以向store.commit传入额外的参数,即mutation的载荷(payload):我们还是以上面累加器的例子来实现mutation函数的传参,来动态定义累加的数量。

在mutation.js中修改add方法

1 2 3 4 5 6 7 8 9 10 const mutations = {   addNum (state) {     state.num++   },   add (state, n) {     state.count += n   } }   export default mutations

在组件中store.commit如何传参

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <template>   <div class="mutation">     <p>{{ count }}</p>     <button @click="addCount">+ADD</button>   </div> </template>   <script> import store from '@/store/store' export default {   computed: {     count () {       return this.$store.state.count     }   },   methods: {     addCount () {       store.commit('add', 5)     }   } } </script>

 在mutation传参(载荷)可以传递一个参数也可以传递一个对象。让我们修改下上面的例子

mutation.js文件中修改如下

1 2 3 4 5 6 7 8 9 10 const mutations = {   addNum (state) {     state.num++   },   add (state, payload) {     state.count += payload.amount   } }   export default mutations

组件中修改如下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <template>   <div class="mutation">     <p>{{ count }}</p>     <button @click="addCount">+ADD</button>   </div> </template>   <script> import store from '@/store/store' export default {   computed: {     count () {       return this.$store.state.count     }   },   methods: {     addCount () {       store.commit('add', { amount: 10 })     }   } } </script>

在store.commit中可以进行对象风格的提交

依据上面的例子,我们将组件中内容修改如下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 <template>   <div class="mutation">     <p>{{ count }}</p>     <button @click="addCount">+ADD</button>   </div> </template>   <script> import store from '@/store/store' export default {   computed: {     count () {       return this.$store.state.count     }   },   methods: {     addCount () {       store.commit({         type: 'add',         amount: 8       })     }   } } </script>

使用常量替代 Mutation 事件类型

使用常量替代mutation事件类型在各种Flux实现中是很常见的模式。这样可以使 linter之类的工具发挥作用,同时把这些常量放在单独的文件中可以让你的代码合作者对整个项目包含的mutation一目了然。这在在需要多人协作的大型项目中,这会很有帮助。

我们在store中新建mutation-types.js文件,文件内容如下

1 export const SOME_MUTATION = 'SOME_MUTATION'

 在mutation.js文件内容如下

1 2 3 4 5 6 7 8 9 10 11 import { ADD } from './mutation-types' const mutations = {   addNum (state) {     state.num++   },   [ADD] (state) {     state.count++   } }   export default mutations

在组件中内容和之前一致

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 <template>   <div class="mutation">     <p>{{ count }}</p>     <button @click="addCount">+ADD</button>   </div> </template>   <script> import store from '@/store/store' export default {   computed: {     count () {       return this.$store.state.count     }   },   methods: {     addCount () {       store.commit('add')     }   } } </script>

在组件中使用this.$store全局属性来触发mutation函数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <template>   <div class="mutation">     <p>{{ count }}</p>     <button @click="add">+ADD</button>   </div> </template>   <script> export default {   computed: {     count () {       return this.$store.state.count     }   },   methods: {     add () {       this.$store.commit('add')     }   } } </script>

在组件中使用mapMutations辅助函数

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 <template>   <div class="mutation">     <p>{{ count }}</p>     <button @click="add">+ADD</button>   </div> </template>   <script> import { mapMutations } from 'vuex' export default {   computed: {     count () {       return this.$store.state.count     }   },   methods: {     ...mapMutations(['add'])   } } </script>

Mutation一条重要的原则就是要记住 mutation 必须是同步函数

Link to comment
Share on other sites