一个有关Vuex的简单案例

使用Vuex实现一个简单的计数器功能

首先在store文件夹中的index.js中编写代码

import { createStore } from 'vuex'

export default createStore({
  state: {
    count:0
  },
  mutations: {
    increment(state){
      // console.log("store++");
      state.count++;
      // console.log(state.count);
    },
    decrement(state){
      state.count--;
    },
    increCount(state,count){   //在这里，这个count就是附带的额外参数payload（挂载）
      state.count += count;
    },
    decreCount(state,count){
      state.count -= count;
    }

  },
  actions: {
  },
  modules: {
  }
})

在组件components中创建Vue文件（以btn.vue为例），然后编写代码：

<template>
    <div>
        <p>{{count}}</p>
        <button @click="addCount(10)">+10</button>
        <button @click="addCount(5)">+5</button>
        <button @click="add()">+1</button>
        <button @click="sub()">-1</button>
        <button @click="subCount(5)">-5</button>
        <button @click="addCount(-10)">-10</button>
        </div>
</template>
<script>
export default {
    name:"btn",
    computed:{
        count(){
            return this.$store.state.count;
        }
    },
    methods:{
        add(){
            // console.log("+1");
            this.$store.commit("increment");
        },
        sub(){
            // console.log("-1");
            this.$store.commit("decrement");
        },
        addCount(count){
            this.$store.commit("increCount",count);   //可以携带一个额外的参数payload

        },
        subCount(count){
            this.$store.commit("decreCount",count);
        }
    }
}
</script>
<style scoped>
p{
    color:red;
    font-size:50px;
    font-weight:600;
    margin:8px;
}
button{
    margin-right:5px;
    margin-left:5px;
    padding:6px;
    font-size:25px;

}
</style>

最后在views文件夹的文件中进行引用并注册，代码如下：

<template>
    <div>
        <span>计数器</span>
        <btn></btn>
        <sun></sun>
    </div>
</template>
<script>
import btn from "@/components/btn.vue"
import sun from "@/components/sunbtn.vue"
export default {
    name:"Count",
    components:{
        btn,
        sun,
    }

}
</script>
<style scoped>


</style>

实现效果如下：