Vue电商项目笔记

一：项目配置

项目配置信息

二：进来显示首页

//重定向
        {
            path:'/home',
            redirect:AppHome
        }

三：路由

声明式导航和编程式导航

声明式导航

<router-link class="logo" title="尚品汇" to="/home">
          <img src="./images/logo.png" alt="" />
</router-link>

编程式导航

<button
            class="sui-btn btn-xlarge btn-danger"
            type="button"
            @click="goSearch()"
          >
            搜索
          </button>

export default {
  name: "AppHeader",
  data() {
    return {};
  },
  methods: {
    goSearch() {
      this.$router.push("/search");
    },
  },
};

四：路由元

组件的显示或者隐藏

v-show

{
            path:'/serach',
            component:AppSearch,
            meta:{
                show:true
            }
        },

<AppFooter v-show="$route.meta.show"></AppFooter>

params参数可传可不传

加个问号

params传递空串

|| undefined

props可以传参（params前提）

注册全局组件

全局组件可以在任何位置使用

components组件切记加s

开发轮播图的公共组件，只能用watch对象写法

watch:{
    list: {
      immediate:true,
      handler() {
        this.$nextTick(() => {
          let mySwiper = new Swiper(this.$refs.floorSwiper, {
            pagination: {
              el: ".swiper-pagination",
              clickable: true,
            },
            // 如果需要前进后退按钮
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev",
            },
            // 如果需要滚动条
            scrollbar: {
              el: ".swiper-scrollbar",
            },
          });
        });
      },
    },
  }

mounted挂载一次，向服务器请求一次数据，但是点击搜索需要访问多次，所以可以封装成函数去使用mounted

mounted() {
    this.getData();
  },
  methods:{
    getData(){
      this.$store.dispatch("search/getSearchList", {});
    }
  },

利用路由信息变化实现动态搜索 

<script>
import SearchSelector from "./SearchSelector/SearchSelector";
import { mapGetters } from "vuex";
export default {
  name: "AppSearch",
  data() {
    return {
      searchParams: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        order: "",
        pageNo: 1,
        pageSize: 10,
        props: [],
        trademark: "",
      },
    };
  },
  components: {
    SearchSelector,
  },
  beforeMount() {
    this.searchParams.category1Id = this.$route.query.category1Id;
    this.searchParams.category2Id = this.$route.query.category2Id;
    this.searchParams.category3Id = this.$route.query.category3Id;
    this.searchParams.categoryName = this.$route.query.categoryName;
    this.searchParams.keyword = this.$route.params.keyword;
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      this.$store.dispatch("search/getSearchList", this.searchParams);
    },
    removeCategoryName() {
      this.searchParams.categoryName = undefined
      this.searchParams.category1Id = undefined
      this.searchParams.category2Id = undefined
      this.searchParams.category3Id = undefined
      this.getData();
      if (this.$route.params) {
        this.$router.push({ name: "search",params:this.$route.params});
      }
    },
  },
  computed: {
    ...mapGetters("search", ["goodsList"]),
  },
  watch: {
    $route(newValue, oldValue) {
      Object.assign(this.searchParams, this.$route.query, this.$route.params);
      //如果下一次搜索时只有params参数，拷贝后会发现searchParams会保留上一次的query参数
      this.getData();
      //所以每次请求结束后将相应参数制空
      this.searchParams.category1Id = "";
      this.searchParams.category2Id = "";
      this.searchParams.category3Id = "";
    },
  },
};

在api接口url中没提示参数就得自己带

export const reqUserRegister = (data)=>{
    return requests({
        url:'/user/passport/register',
        data:data,
        method:'POST',
    })
}

计算属性返回被选中的数据

userDefaultAddress(){
      return this.address.find(item=>{
        return item.isDefault == 1
      });
    }

如果没有Vuex仓库管理数据，可以在原型对象上加上接口（API）