Final Project

https://github.com/oanstein/VueJS-Complete-Guide-Code/tree/master/18_final_project/the_stock_trader_app

---

Example: Disable button by default unless isInteger

/src/components/stocks/Stock.vue#L20

<div class="pull-right">
    <button
            class="btn btn-success"
            @click="buyStock"
            :disabled="insufficientFunds || quantity <= 0 || !Number.isInteger(quantity)"
    >{{ insufficientFunds ? 'Insufficient Funds' : 'Buy' }}
    </button>
</div>

---

Example: Vuex, state management and Store.js

/src/store/store.js

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

import stocks from './modules/stocks';
import portfolio from './modules/portfolio';

import * as actions from './actions';

Vue.use(Vuex);

export default new Vuex.Store({
    actions,
    modules: {
        stocks,
        portfolio
    }
});

NOTE concerning Namespacing (/src/store/modules/stocks.js) – If you're using Vuex version 2.1 or higher, you may use its auto-namespacing feature to avoid having to set up all the namespaces manually. You may learn more about it here: https://github.com/vuejs/vuex/releases/tag/v2.1.0

---

Example: Mutations

Use destructuring to get {stockId, quantity, stockPrice}. This also represents the order in Stock.vue of the buyStock() method; otherwise you couldn't pull it out.

/src/store/modules/portfolio.js#L7

const mutations = {
    'BUY_STOCK'(state, {stockId, quantity, stockPrice}) {
        // Check if there is a record; 
        // loop through array and check if element id is present 
        const record = state.stocks.find(element => element.id == stockId);
        
        // if record is set (array not empty); update quantity
        // else add new portfolio object to array
        if (record) {
            record.quantity += quantity;
        } else {
            state.stocks.push({
                id: stockId,
                quantity: quantity
            });
        }
        
        // Update user's funds
        state.funds -= stockPrice * quantity;
    },
    // Other Code
};

/src/components/stocks/Stock.vue#L56

methods: {
    buyStock() {
        const order = {
            stockId: this.stock.id,
            stockPrice: this.stock.price,
            quantity: this.quantity
        };
        this.$store.dispatch('buyStock', order);
        this.quantity = 0;
    }
}

---

Example: Getters

/src/store/modules/portfolio.js#L41

const getters = {
    stockPortfolio (state, getters) {
        
        // Problem: only ids in stocks array, I need to access the stocks module; 
        // Solution: .map() allows to transform each element in the array.
        return state.stocks.map(stock => {

            // 'getters' refers to global store.js (vuex)
            // 'stock' refers to stock of current .map()
            // 'element' refers to stock array of _all_ the stocks in the global store
            const record = getters.stocks.find(element => element.id == stock.id);
            return {
                id: stock.id,
                quantity: stock.quantity,
                name: record.name,
                price: record.price
            }
        });
    },
    
    // Get the user's funds 
    funds (state) {
      return state.funds;
    }
};