Vuex案例实现加减功能

1.在项目中安装vuex(不会创建项目的可以查看我的文章:Vue项目步骤)

    npm install vuex --save-dev

2.在components文件夹内
   建立vuex.vue
   在src文件夹内

   建立store.js

3.打开main.js  修改其中数据,把vuex.vue引入进来
  因为我们在这里用不到路由,所以把import router from './router'注释
  new Vue中的router注释
  把vuex引入进来:    import Vuex from './components/vuex'
  new Vue中App改成Vuex
  代码如下:

import Vue from 'vue'
import App from './App'
// import router from './router'
import Vuex from './components/vuex'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  // router,
  template: '<Vuex/>',
  components: { Vuex }
})

4.vuex.vue中

<template>
    <div>
        <p>{{$store.state.num}}</p>
        <!-- commit  触发函数的方法 -->
        <button @click="$store.commit('reduce')">-</button>
        <button @click="$store.commit('add')">+</button>
    </div>
</template>

<script>
    import store from "../store"

    export default{
　　　　 name:"shortcut",
        store
　　}

</script>

<style>
</style>

5.store.js中

import Vue from "vue"
import Vuex from "vuex"

Vue.use(Vuex);

const state={
  num:0
};
const mutations={
  //事件
  add(){
    state.num++
  },
  reduce(){
    state.num--
  }
};
const getters={

};
const actions={
  //分发事件
};
export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions
})

打个广告：淘宝天猫内部优惠群，加我微信拉你进群18801014156