vuex的基本使用8步骤——等同于购物车里面的数量增减：

vuex的基本使用8步骤——等同于购物车里面的数量增减：

首先通过vue创建项目，并且添加vue-router和vuex两个插件：

项目目录如下图所示：

此文章所涉及的三个组件代码将会展示在下面。

此文章经过小编亲测，只为分享知识点，供大家参考学习。

vuex的基本使用8步骤——等同于购物车里面的数量增减：
1.在index

目录

vuex的基本使用8步骤——等同于购物车里面的数量增减：
1.在index.js里面设置count。
2.在About.vue里面设置count的计算属性。
3.在About.vue里面设置显示count。
4.在About.vue里面设置+1和-1按钮。
5.在About.vue里面设置声明increment和decrement方法。
6.在/store/index.js里面设置Increment和decrement方法。
7.在/store/index.js里面设置修改状态。
8.在App.vue上设置使用。

---

1.在index.js里面设置count。

// store/index.js内容

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count:0  //1.在index.js里面设置count.
  },
  getters: {
  },
  mutations: {  //7.在/store/index.js里面设置修改状态。
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    }
  },
  actions: {  //6.在/store/index.js里面设置Increment和decrement方法。
    increment({commit}){
      commit('increment')
    },
    decrement({commit}){
      commit('decrement')
    }
  },
  modules: {
  }
})


//vuex的基本使用8步骤——等同于购物车里面的数量增减：
//1.在index.js里面设置count。
//2.在About.vue里面设置count的计算属性。
//3.在About.vue里面设置显示count。
//4.在About.vue里面设置+1和-1按钮。
//5.在About.vue里面设置声明increment和decrement方法。
//6.在/store/index.js里面设置Increment和decrement方法。
//7.在/store/index.js里面设置修改状态。
//8.在App.vue上设置使用。

2.在About.vue里面设置count的计算属性。
3.在About.vue里面设置显示count。
4.在About.vue里面设置+1和-1按钮。
5.在About.vue里面设置声明increment和decrement方法。

// About.vue内容

<template>
  <div class="about">
    <h1>This is an about page</h1>
    {{count}} <!-- //3.在About.vue里面设置显示count。 -->
    <button @click="increment">+1</button>  <!-- //4.在About.vue里面设置+1和-1按钮。 -->
    <button @click="decrement">-1</button>
  </div>
</template>
<script>
  export default{
    computed:{  //2.在About.vue里面设置count的计算属性。
      count(){
        return this.$store.state.count;
      }
    },
    methods:{ //5.在About.vue里面设置声明increment和decrement方法。
      increment(){
        this.$store.commit('increment');
      },
      decrement(){
        this.$store.commit('decrement');
      }
    }
  }
</script>

6.在/store/index.js里面设置Increment和decrement方法。
7.在/store/index.js里面设置修改状态。

 请查看上面的index.js代码。

8.在App.vue上设置使用。

App.vue代码：

// App.vue内容

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>  |
      {{$store.state.count}}  <!-- 8.在App.vue上设置使用。 -->
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

运行结果如下：