vue create vue2-vuex-test

vue create vue2-vuex-test
// 隨機產生uuid輕量版
npm install nanoid
// 安裝 vuex 這邊注意要安裝vuex 3的版本不然會抓不到store
npm install vuex@3
// 安裝axios
npm install axios

mkdir store/module/ -p

// 引入lib
import Vue from 'vue'
import Vuex from 'vuex'
// 載入module
import Product from './module/product'
import Cart from './module/cart'
Vue.use(Vuex)

export default new Vuex.Store({
    modules:{
        Product,
        Cart
    }
})

export default {
    namespaced: true,
    actions: {},
    mutations: {},
    state: {
        //商品列表
        productList: []
    },
    getters: {}
}

export default {
    namespaced: true,
    actions: {},
    mutations: {},
    state: {
        //購物車內容
        cartList: [],
        //目前數量
        cartCount: 0,
        //目前總金額
        cartPriceTotal: 0
    },
    getters: {}
}

npm run serve

// 當 v-for 裡有一個 select 欄位，但來源資料裡並沒有時，可以搭配 ref 及 index 來取得 user 選取的值 (data 內不需要建立)
<li v-for="(p,index) in productList" :key="p.id">   
    <select :key="p.id" ref="amounts">
        <option 
            :value="num" 
            v-for="num in 10" 
            :key="num"
            :selected="num===1"
        >
        {{ num }}
        </option>
    </select>
    <button @click="addCart(p,index)">加入購物車</button>
</li>

// 取得方法
this.$refs.amounts[index].value