vuex的简单使用

要在main.js里引入store文件夹里的index.js

home.vue

<template>
  <div class="home">
    <button @click="clickHandle()">加购物车</button>
    <foot></foot>
  </div>
</template>

<script>

import foot from '../components/footer'
import store from '../store/index.js'
export default {
  name: 'home',
  components: {
    foot
  },
  methods: {
    clickHandle () {
      this.$store.dispatch('addCount')
    }
  },
};
</script>
<style scoped>
button {
  background: deeppink;
  color: #fff;
  border: 0;
  width: 80px;
  height: 50px;
  margin: 100px auto;
}
</style>

footer.js

<template>
  <div class="foot">
    <ul>
      <li>首页</li>
      <li>列表</li>
      <li>购物车({{this.$store.state.count}})</li>
      <li>我的</li>
    </ul>
  </div>
</template>
<script>
import store from '../store/index.js'
export default {
  data () {
    return {

    }
  }
}
</script>
<style scoped>
ul {
  position: fixed;
  bottom: 0;
  background: #efefef;
  display: flex;
  height: 50px;
  width: 100%;
  line-height: 50px;
}
li {
  list-style: none;
  width: 25%;
}
</style>

store文件夹里的index.js

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0,
  },
  mutations: {
    INFOR(state) {
      state.count += 1;
    },
  },
  actions: {
    addCount({ commit }) {
      commit('INFOR');
    },
  },
});