vue 全家桶（七）vuex 状态管理（实现购物车）

Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力集中于数据的更新而不是数据在组件之间的传递上。

本文以购物车为例，对概念没有过多阐述，建议先浏览官网：https://vuex.vuejs.org/

一. 预期效果

   - 【页面】商品列表组件、购物车列表组件、商品结算组件

   - 【功能】将商品加入购物车,更新购物车列表

   - 【功能】增减商品时，库存、总数、总价变化

  

二. 具体实现

  1.文件结构

store
    ├── index.js             # 导出 store 的地方
    ├── state.js             # 根级别的 state
    ├── getters.js           # 二次包装state数据
    ├── actions.js           # 根级别的 action
    ├── mutations.js         # 根级别的 mutation
    ├── mutation-types.js    # 所有 mutation 的常量映射表

2.安装

npm install vuex --save

3.在src目录下新建store/index.js，代码如下：

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

import actions from '@/store/actions.js';
import getters from '@/store/getters.js';
import mutations from '@/store/mutations.js';
import state from '@/store/states.js';

Vue.use(Vuex);


export default new Vuex.Store({
  state,
  mutations,
  getters,
  actions,
})

4.在main.js文件中引入

import router from './router'
import store from './store/index'

new Vue({
  el: '#app',
  router,
  util,
  store,
  components: {App},
  template: '<App/>'
})

   5.页面搭建及组件实现（注：这里的组件都是全局注册的,可参考：https://blog.csdn.net/try_try_try/article/details/85264175）

   - 数据准备

goodsData: [
          { 'id': 1, 'url':imgTmp, 'name': "美的洗碗机", 'price': 2000,'inventory':5,'num':1 },
          { 'id': 2, 'url':imgTmp, 'name': "美的豆浆机", 'price': 1000,'inventory':100,'num':1 },
          { 'id': 3, 'url':imgTmp, 'name': "美的微波炉", 'price': 1500,'inventory':80,'num':1 }
        ]

  - 商品列表项组件(goodsItem)

<template>
  <div class="goods_item">

    <div class="goods_item_content">

      <div class="goods_item_radio">
        <img style="width:60px;height:60px" :src="good.url" alt="">
      </div>

      <div class="goods_item_title">
        <div class="goods_item_name" >{
  {good.name}}</div>
        <div class="goods_item_name" style="color: gray" >库存: {
  {good.inventory}}</div>