mutations.js文件书写规范及模板调用此文件书写方法

Posted 2022-07-14 asplover

1)mutations.js代码如下

const mutations=
    add(state)
        state.count++
    ,
    reduce(state)
        state.count--
    

 2)在button中，通过commit直接调用。

<button @click="$store.commit(‘add‘)">+</button>
<button @click="$store.commit(‘reduce‘)">-</button>

 放在组件home.vue中案例代码

<template>
  <div class="Home">
    <button @click="$store.commit(‘add‘)">+</button>
    <button @click="$store.commit(‘reduce‘)">-</button>

    <p>引用state选项一个变量:count</p>
    </div>
</template>
<script>
export default 
  name: ‘Home‘,
  data () 
    return 
      msg: ‘Home.vue 组件‘
    
  ,
  computed: 
    // 调用是vuex,state选项文件rootState.js中声明变量
    count () 
      console.log(‘this结构:‘ + this.$store.state.count)
      return this.$store.state.count
    
  

</script>