基于vuex实现的购物车demo

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化

• state 存放数据，映射到computed
• getters 计算属性，映射computed里面
• mutations 方法，放在组件的methods里面，必须是同步函数，通过this.$store.commit(‘函数’)
• action 提交mutations 可以包含异步操作
• module 保证每个组件都有自己的state,getters,mutations,action

准备工作

• 下载一个空的脚手架 npm i @vue/cli -g;创建一个空的项目vue create demo
• 我是通过组件快速开发的，安装vant组件，具体如何使用可以查看官方文档vant移动端组件

// App.vue
<template>
  <div>
    <!-- 头部 -->
    <!-- 内容 -->
    <div class="contanier">
      <li v-for="item in list" :key="item.id">
        <van-card :num="item.num" :title="item.title" :price="item.price" :thumb="item.src">
          <div slot="footer" class="footer">
            <p></p>
            <div class="btn">
              <button @click="add(item.id)"><