Vuex state management [case]: shopping cart on 2023.05.19

Table of contents

1. Install node10: node-v10.24.1-x64.msi, check whether the installation is successful

2. Create a folder demo on the F disk, enter the command line window with cmd, and enter the specified directory with the cd command

3. Initialize the project

4. Set Taobao Mirror

5. Install vue@2

6. Install vue-cli

7. Install [email protected] webpack-cli@3

8. Create a project

9. Enter the shopcart directory and install vuex

10. Run the service and view the results in the browser

11. Realize the switching of the bottom Tab bar

12. Create the component file src\components\GoodsList.vue

13. Create the component file src\components\Shopcart.vue

14. Modify src\router\index.js

15. Modify the entry src\App.vue, and view the results in the browser 

16. Modify the entry src\App.vue and add styles

17. Browser to view the results

18. Create commodity data src\api\shop.js

19. Create and manage commodity status src\store\modules\goods.js

20. Create src\store\modules\shopcart.js

21. Create src\store\index.js

22. Modify src\main.js

---

1. Install node10: node-v10.24.1-x64.msi, check whether the installation is successful

node -v

2. Create a folder demo on the F disk, enter the command line window with cmd, and enter the specified directory with the cd command

f:
cd demo

3. Initialize the project

4. Set Taobao Mirror

npm config set registry https://registry.npm.taobao.org

or

npm config set registry https://registry.npmmirror.com

5. Install vue@2

npm i -g vue@2 -g

6. Install vue-cli

npm I –g vue-cli -g

7. Install [email protected] webpack-cli@3

npm i [email protected] webpack-cli@3 --save

8. Create a project

vue init webpack shopcart

Enter Enter Enter Enter Enter.....

9. Enter the shopcart directory and install vuex

cd shopcart

npm i [email protected] --save

10. Run the service and view the results in the browser

npm run dev

Enter in the browser address bar: localhost:8080

11. Realize the switching of the bottom Tab bar

Copy the image resource to the static directory

12. Create the component file src\components\GoodsList.vue

<template>
  <div>
    goodslist
  </div>
</template>

<script>
</script>

<style>
</style>

13. Create the component file src\components\Shopcart.vue

<template>
  <div>
    shopcart
  </div>
</template>

<script>
</script>

<style>
</style>

14. Modify src\router\index.js

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/components/GoodsList'
import Shopcart from '@/components/Shopcart'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'GoodsList',
      component: GoodsList
    },
    {
      path: '/shopcart',
      name: 'Shopcart',
      component: Shopcart
    }
  ]
})

15. Modify the entry src\App.vue, and view the results in the browser 

<template>
  <div id="app">
    <div class="content">
      <router-view></router-view>
    </div>
    <div class="bottom">
      <router-link to="/" tag="div">商品列表</router-link>
      <router-link to="/shopcart" tag="div">购物车</router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>

16. Modify the entry src\App.vue and add styles

<template>
  <div id="app">
    <div class="content">
      <router-view></router-view>
    </div>
    <div class="bottom">
      <router-link to="/" tag="div">商品列表</router-link>
      <router-link to="/shopcart" tag="div">购物车</router-link>
      <!-- <router-link to="/shopcart" tag="div">购物车</router-link> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
  html,body{
    height: 100%;
  }
  body{
    margin: 0;
    font-size: 12px;
    box-sizing: border-box;
  }
</style>
<style scoped>
  #app{
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .content{
    flex: 1;
    overflow-y: scroll;
  }
  .bottom{
    height: 40px;
    display: flex;
    border-top: 1px solid #ccc;
  }
  .bottom>div{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #444;
  }
  .bottom>div:not(:last-child){/* 复合选择器 */
    border-right: 1px solid #ccc;
  }
  .bottom>div.router-link-exact-active{
    color: #f18741;
    font-weight: bold;
    background: #fef5ef;
  }
</style>

17. Browser to view the results

18. Create commodity data src\api\shop.js

const data=[
  {'id':1,"title":'电水壶','price':59.01,src:"/static/1.jpg"},
  {'id':2,"title":'压力锅','price':159.01,src:"/static/2.jpg"},
  {'id':3,"title":'电饭煲','price':259.01,src:"/static/3.jpg"},
  {'id':4,"title":'电磁炉','price':359.01,src:"/static/4.jpg"},
  {'id':5,"title":'微波炉','price':459.01,src:"/static/5.jpg"},
  {'id':6,"title":'电饼铛','price':559.01,src:"/static/6.jpg"},
  {'id':7,"title":'豆浆机','price':659.01,src:"/static/7.jpg"},
  {'id':8,"title":'电热锅','price':759.01,src:"/static/8.jpg"},
]
export default{
  getGoodsList(callback){
    setTimeout(()=>callback(data),100) //单位是毫秒值
  }
}

19. Create and manage commodity status src\store\modules\goods.js

import shop from '../../api/shop'

const state = {
  list: [] //存储商品列表
}

const getters = {} //用于计算的

// 获取商品列表数据
const actions = {
  getList ({ commit }) {
    shop.getGoodsList(data => {
      commit('setList', data)
    })
  }
}
// 将商品列表保存到state中
const mutations = {
  setList (state, data) {
    state.list = data
  }
}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

20. Create src\store\modules\shopcart.js

const state = {
  items: [] //保存购物车列表
}
const getters = {}
const actions = {}
const mutations = {}

export default {
  namespaced: true,
  state,
  getters,
  actions,
  mutations
}

21. Create src\store\index.js

import Vue from 'vue'
import Vuex from 'vuex'
import goods from './modules/goods'
import shopcart from './modules/shopcart'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    goods,
    shopcart
  }
})

22. Modify src\main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  store
})