Web前端vue必做笔记之一:Vuex基本使用（二）

Web前端vue必做笔记之一:Vuex基本使用（二）

我们来看看这个功能

首先我们看到Vuex的主目录index.js

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

Vue.use(Vuex);

import state from './state';
import mutations from './mutations';
import * as actions from './actions';
import * as getters from './getters';
 

 
export default new Vuex.Store({
  state,       //保存的一些数据，比如说购物车列表
  getters,     //可以理解成是state一个计算属性
  mutations,    //可以理解是设置数据
  actions,     //可以理解是处理多个mutations执行
  
});

在state.js中

//比如说一下购物车列表
const state = {
     items:[]
}

export default state;

在getters.js中

export const items = function(state){
      
    return state.items;      //通过getters可以访问state中items的数据
}   

在mutations-types.js中

//专门用来管理操作数据的方法

//添加购物车方法
export const PUSH_PRODUCT_TO_CART = 'PUSH_PRODUCT_TO_CART';

//增加商品数量方法
export const INCREMENT_ITEM_QUANTITY = 'INCREMENT_ITEM_QUANTITY'

在mutations.js

import * as types from './mutation-types';

const mutations = {

    //添加购物车方法
    //每次添加商品就增加商品的id,title,quantity(数量)
    [types.PUSH_PRODUCT_TO_CART](state,product){
          state.items.push({
                id:product.id,
                title:product.title,
                quantity:1
          })
    },

     //如果已经有商品了，就增加数量就可以了
    [types.INCREMENT_ITEM_QUANTITY](state, product) {
         const cartItem = state.items.find(item => item.id === product.id);
         cartItem.quantity++;
    }
   
}

export default mutations;

在App.vue中

<template>
  <div id="app">
    <ul>
       <li v-for="item in listData" :key="item.id">
            <h3>{{item.title}}</h3>
            <!-- 这个item参数会传到action中第二个参数(也就是product)， actions中第一个参数vuex会自动帮我们传入，我们自己传入的参数会从第二位算起 -->
            <button @click="addProductToCart(item)">添加到购物车</button>  
       </li>
    </ul>

    <ul>
       <li v-for="item in items" :key="item.id">
          <h1>{{item}}</h1>
       </li>
    </ul>

     <!-- 使用getters访问数据 -->
    <!-- <h2>{{items}}</h2> -->


    <!-- 不用getters访问数据 -->
    <!-- <h1>{{$store.state.items}}</h1> -->
          
  </div>
</template>

<script>
import axios from 'axios';
import {mapGetters, mapActions} from 'vuex';
export default {
     data(){
          return {
              listData:[]
          }
     },
     computed:{
         ...mapGetters(['items'])
     },

     methods:{
           _getList(){
                 axios.get('https://jsonplaceholder.typicode.com/albums?_limit=5')
                 .then(({data}) =>{
                       this.listData = data;
                 })
           },

          //  ...mapMutations({
          //       pushProductToCart: 'PUSH_PRODUCT_TO_CART'
          //  })

          // addProductToCart(){} 相当于定义了这个方法，所以可以在组件中使用这个方法
           ...mapActions([
             'addProductToCart'
           ])
          
        //  如果不写mapActions就需要这样写，就麻烦一些
        //   addProductToCart(item){
        //       this.$$store.dispatch('addProcuctToCart',item);
        //   }
     },
     created(){
          this._getList();
     }
}
</script>
<style>

</style>