###關於[…res] , {…res}
解耦 展開

	msiteFoodTypes(this.geohash).then(res => {
       	  console.log(res);
       		let resLength = res.length;
       		let resArr = [...res]; // 返回一個新的陣列 深拷貝 這兩個陣列所作的操作 不會被幹預
          console.log(resArr);
          res.push("1")
          console.log("--------------------"
 
);
          console.log(res);
          console.log(resArr);

如果res返回的是陣列就使用[…res] 如果是obj物件使用 {…res}。
列印的結果如下所示：

可見在res裡面新增資料 ，resArr裡面的資料並不會同步改變，很多時候專案裡面會用到這樣的需求，通過http請求 得到的資料不想被改變 所以就去複製一樣的要求原資料不能被改變!
es6的寫法就如上
es5： JSON.parse(JSON.stringify(res))
###vue檔案裡面訪問其他資料夾下的圖片
有這樣一個需求 圖片不放本地專案的工程目錄裡面 因為壓縮的時候包會很大，所以我們要把大圖片單獨拎出來，放到後臺專案裡面的某個目錄裡 那就涉及到vue裡面的圖片路徑怎麼寫了
比如這個單獨存放圖片的檔案叫做img 跟打包後的dist 放在同一個資料夾，則寫法如下：
寫成動態的:src

###vuex
store.js store已經全域性註冊了（main.js）使用this.$store 不用每個頁面單獨引入store.js檔案了

import store from './store';
new Vue({
  router,
  store,
  render: h => h(App),
}).$mount('#app');

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    userlogin: false,
  },
  mutations: {
    SETUSERLOGIN(state, loginState) { // 大寫
      state.userlogin = loginState;
      // console.log(state.userlogin);
    },
  },
  actions: {
    setUserLogin({ commit }, loginState) { // 小寫
      commit('SETUSERLOGIN', loginState);
    },
  },
});

 

元件：

<template>
	<div>
	<!-- 可在此觀看監聽的狀態 -->
		{{userlogin}} 
	</div>
</template>
import {mapState, mapMutations} from 'vuex'
  mounted() {
    console.log(this.userlogin);
    // if(!this.userlogin){
    //   this.$router.push({
    //     name: 'login',
    //   });
    // };
    setInterval(()=>{ // 自己創造監聽條件
      const t = !this.userlogin;
      this.SETUSERLOGIN(t);
      console.log(this.userlogin)
    },2000);
  },
  watch: { // 監聽的就是data變數  監聽state變化
    userlogin() { // 函式的名字就是 對應的data/（vuex store state）裡 變數的名字 
      console.log(this.userlogin);
    }
  },
  computed: {
    // ...mapState([
    //     'userlogin'
    // ]),
    等價於
    // userlogin() {
    //   return this.$store.state.userlogin
    // },
  },
 methods: {
    // ...mapMutations([
    //   'SETUSERLOGIN',
    // ]),
    等價於
    // SETUSERLOGIN(loginstate) {
    //   this.$store.commit('SETUSERLOGIN', loginstate);
    // },
    toLoginClick() {// 跳轉到login頁面
      this.SETUSERLOGIN(true);
      console.log(this.userlogin);
    },
	以上是使用mutations （commit）


	下面是使用actions （dispatch）
	toLoginClick() {// 跳轉到login頁面
      this.$store.dispatch('setUserLogin', true);
      console.log(this.userlogin);
    },
    等價於：
    ...mapActions([
      'setUserLogin',
    ]),
    toLoginClick() {// 跳轉到login頁面
      this.setUserLogin(true);
      console.log(this.userlogin);
    },
	
  }, 

promise ， promise鏈 與 async await 的使用

export default {
  data() {
    return ({
    });
  },
  mounted() {
    this.queryFun().then(()=>{
      console.log('--------執行完之後走的路')
    });
    this.queryFun1();
  },
  },
  methods: {
    queryFun(){
     return new Promise((resolve, reject)=>{
      this.$api.query().then((res)=>{
        console.log('-----------promise',JSON.parse(res));
        resolve(true)
      }).catch((error)=>{
        console.log(error);
      })
     });
    },
    async queryFun1(){
      try {
        const response = await this.$api.query();
        console.log('-----------await-response',JSON.parse(response))
      } catch (error) {
        console.log(error)
      }
    },
  },
};