使用Vue建立一个在线商店

git代码：https://github.com/chentianwei411/vue-router-demo.git

 

使用Vue-CLI3

webpack, ESLInt,

Vuex,

vue-router

 

axios  (用于异步发出请求)

vee-validate  (用于表格验证)

bootstrap-vue

vue-toastr-2   (用于添加通知)  （需要yarn add jquery， 需要yarn add toastr ）

---

  

The Project结构：

• Products listing
• Product Details (一个商品的详细介绍)
• Cart(Add, Remove, and Listing)
• Admin Section  (CRUD，管理Products)

---

 

基础：

需要安装node到最新版本，然后使用npm安装vue-cli。

npm install -g vue-cli

 

使用vue ui用户界面创建一个app,并选择使用的插件。

（具体使用见我之前的博文）https://www.cnblogs.com/chentianwei/p/10116155.html

 

Vue的基础知识：

MVC,MVVM,MVP的区别/ Vue中忽略的知识点！

 

完成后的文件结构：

 

---

 

 

Routing 

参考：vue-router 

//2个基本组件
<router-view></router-view>

<router-link to="/">Home</router-link>

// store.js中的routes

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/admin',
      //因为子路径有默认的，所以无需 name: 'Admin',
      component: Index,
      // children
      children: [
        {
          path: 'new',
          name: 'New',
          component: New
        },

 

还有嵌套路由，及嵌套命名路由，动态路由。

过渡<transition>包裹<router-view>。

---

 

Form验证

使用VeeValidate即可。 见博文：https://www.cnblogs.com/chentianwei/p/10128205.html

看productForm.vue:

代码摘录：

//template:  
<form @submit.prevent="saveProduct">
      <div class="row">
      <div class="col-lg-7 col-md-5 col-sm-12 col-xs-12">
        <div class="form-group">
          <label>Name</label>
          <input
            type="text"
            placeholder="Name"
            v-model="model.name"
            v-validate="'required'"
            name="name"
            :class="{'form-control': true, 'error': errors.has('name') }" />
          <span class="small text-danger" v-show="errors.has('name')">Name is required</span>
        </div>

<script>
  import { ERROR_MSG } from '../../store/mutations-types.js'

  export default {
// isEditing prop用于显示提交按钮上的名字
    props: ['model', 'isEditing', 'manufacturers'],

    methods: {
      saveProduct() {// 这是插件的方法，会返回一个Promise：
        this.$validator.validateAll().then(() => {
// emit一个event给父组件
          this.$emit('save-product', this.model)
        }).catch(() => {
// 提交一个错误到Vuex.Store
          this.$store.commit(ERROR_MSG, {
            type: 'error',
            title: 'Validation!',
            content: 'Please ensure the form is valid'
          })
        })
      }
    }
  }

</script>

---

 

 

Vuex

本app核心要点解释（具体见git上的代码）

1.store.js文件，state的状态管理根文件。

import { productGetters, manufacturerGetters } from './getters.js'
//...略...

export default new Vuex.Store({
  strict: true,
  state: {//略... },
  // 把传入的对象合并：Object.assign()
  getters: Object.assign({}, productGetters, manufacturerGetters),

 

2.getters.js

要使用的计算属性。

 

3. mutations-types.js

// When creating the mutation and while committing to the mutation.
// This creates a layer of possible typographical error.
// You can use constants to replace these types
// and allow tools like IntelliSense to help you avoid typos and errors:
// 使用常量，来防止语法错误。

 

4. actions

import axios from 'axios'

//...

// 这里定义的actions都是由各个组件来激发的
// 例如： allProducts，它在Products.vue中被激发
// 提交ALL_PRODUCTS mutation，它会开始一个loading spinner即记录此时是加载中。
// 之后使用axios发出一个HTML request,这是异步函数。
// 收到response后，提交一个带有返回data作为参数的success mutation。
// 这个mutiation会修改state的products,并改showLoader为false，代表结束加载。

export const productActions = {
  // Prodcuts.vue, PrdouctList.vue中被使用。(created hook内)
  allProducts ({commit}) {
    commit(ALL_PRODUCTS)
    axios.get(`${API_BASE}/products`).then(response => {
      commit(ALL_PRODUCTS_SUCCESS, response.data)
    })
  },

 

5. mutations.js

export const productMutations = {
  // 每个mutation都有一个success mutation, 它会在mutation完成后调用！
  // mutation只会抛出一个等待的pending state, 可以用于过渡的css
  // 然后success mutation更新UI，并关闭pending state。

  // showLoader 用于配合vue-toastr插件显示通知信息。
  [ALL_PRODUCTS] (state) {
    state.showLoader = true
  },

  [ALL_PRODUCTS_SUCCESS] (state, payload) {
    state.showLoader = false
    state.products = payload
  },

 

 

各类知识点：

见博文  Vue.js简单的状态管理和 Vuex的几个核心概念使用。

 

由于状态零散地分布在许多组件和组件之间的交互中，大型应用复杂度也经常逐渐增长。

• 如果多层组件嵌套使用，传递prop,和事件emit。都很不方便。
• 不方便对数据的修改进行历史记录。影响后续的调试！

 

严格模式的表单处理：

参考之前的博客：嵌套的JavaScript评论 Widget Models  （有一个替代的vue插件）

当在严格模式中使用 Vuex 时，在属于 Vuex 的 state 上使用 v-model 会比较棘手。

这是因为严格模式下，state的任何变化都需要通过mutation来改变。而v-model直接绑定data，所以会报错❌。

2种办法：

• 不使用v-model,改用v-bind和v-on,然后使用action->mutation的顺序改变state
• 还是使用v-model,  使用带有setter 的双向绑定计算属性。

//template:

<input v-model="message">

//script
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

 

---

 

在组件中使用Store: 

包括

1. A list of products (Home page)
2. Product details (Details Page)
3. Cart (Cart Page) + Cart count
4. A table of products (Admin)
5. form的edit
6. A loading spinner

 

Products List, Item and Button

在/views/home.vue中

import ProductList from '../components/products/ProductList.vue'

 

编写ProductList.vue

编写product-item组件， 它用在ProductList.vue内。

编写product-button组件，它用在ProductItem.vue内

 

Product Details

创建一个产品详细描述的组件。Details.vue。它内部调用ProductDetails.vue

需要增加一个动态路径，来导航到产品详情页面。

//在routers.js的routes:内添加一个新的路径
{
  path: '/details/:id',
  name: 'Details',
  component: Details
}

 

 

因为cart.vue中也要用到ProductDetails.vue.

 

---

 

Admin Features(略)

Spinner, Cart & Strore Subscriptions（略）