Vuex

• computed 計(jì)算屬性
• getters 用來(lái)獲取state里的東西
• actions 分派動(dòng)作
• filter 過(guò)濾器

一、computed 計(jì)算屬性使用

需要對(duì)數(shù)據(jù)(屬性進(jìn)行操作時(shí))，可以把操作函數(shù)方法放在這個(gè)對(duì)象里，然后處理完后直接用對(duì)象調(diào)用到需要的部分，注意要有return

<template>
  <div>
    <div>
      <h3>訂單詳情</h3>
      <!-- 利用計(jì)算屬性賦值 -->
      下單時(shí)間:{{payTime}}
      <!-- 直接調(diào)用方法名到需要的地方 -->
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      payOrderId: "2019022319345666801",
      orderId: "",
      delivery: {
        name: "",
        address: "",
        postCode: "",
        phone: "15013795539"
      },
      mobile: "15013795539",
      expressAmount: 0,
      endPayTime: 1550922564,
      endReceiptTime: 0,
      deliveryTime: 0,
      supplierId: 0
    };
  },
  // 計(jì)算屬性對(duì)象
  computed: {
  // 處理數(shù)據(jù)的方法
    payTime() {
      let date = new Date(this.endPayTime * 1000);
      let Y = date.getFullYear();
      let M = date.getMonth() + 1;
      let D = date.getDate();
      let h = date.getHours();
      let m = date.getMinutes();
      let s = date.getSeconds();
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    }
  },
};
// 通過(guò)vuex的 $store.commot 方法使用store創(chuàng)庫(kù)里的方法并傳參數(shù)過(guò)去
</script>

<style>
</style>

二、getters 應(yīng)用

getters 是vuex里的一個(gè)對(duì)象用來(lái)獲取state里儲(chǔ)存的數(shù)據(jù)
然后映射出去可以直接使用

• 獲取數(shù)據(jù)在store文件夾的index.js下

下列代碼都是在vuex對(duì)象里的
// 用來(lái)獲取state里的東西
    getters:{
        // 定義兩個(gè)對(duì)象。里面有對(duì)應(yīng)處理數(shù)據(jù)的函數(shù) 然后通過(guò)getters映射出去 mapGetters 然后可以通過(guò)mapGetters訪(fǎng)問(wèn)里面的對(duì)象
        showFooter:(state)=>{
            return state.showFooter
        },
        isLogin: state => state.isLogin
    },

-外部使用

<template>
  <div>
    <h3>個(gè)人中心</h3>
    <!-- <div v-if="$store.state.isLogin"> -->
    <!-- 效果一樣 -->
    <div v-if="isLogin">
      <p>手機(jī)尾號(hào)5539</p>
      <button @click="logout">退出登陸</button>
    </div>
    <button v-else @click="login">立即登陸</button>
  </div>
</template>

<script>
// mapGetters映射
import { mapGetters } from "vuex";
export default {
  computed: {
    // mapGetters 使用方法
    ...mapGetters(["isLogin"])
    }
  },
methods: {
    login() {
      this.$store.commit("ISLOGIN", true);
    },
    logout() {
      this.$store.commit("ISLOGIN", false);
    }
  }
};
// 通過(guò)vuex的 $store.commot 方法使用store創(chuàng)庫(kù)里的方法并傳參數(shù)過(guò)去
</script>

<style>
</style>

• 小結(jié)：vuex里getters獲取數(shù)據(jù)->外部引用vuex的mapGetters->通過(guò)computed計(jì)算屬性對(duì)象->使用...mapGetters(["isLogin"])->然后在引用數(shù)據(jù)isLogin。
  對(duì)比 直接訪(fǎng)問(wèn)數(shù)據(jù)的方法，多了許些步驟，但效果一樣，按需求來(lái)用

三、actions 分派動(dòng)作

• actions 分派動(dòng)作 數(shù)據(jù)傳遞流程 store->actions->commit->mutations->state->頁(yè)面
  store文件里的index.js下

actions:{
        ISLOGINACTION({ commit }, payload) {
            commit('ISLOGIN', payload);
        }
        // 使用的時(shí)候 $store.ISLOGINACTION.commit('ISLOGIN',true)
    }

• 小結(jié) : 實(shí)際里常使用 $store.commit('ISLOGIN',true) 簡(jiǎn)潔(跳過(guò)了actions步驟)

四、filter 過(guò)濾器

• filter ：作用，有時(shí)候我們會(huì)碰到要單獨(dú)處理的數(shù)據(jù)，然后需要編寫(xiě)做處理的方法函數(shù)，這個(gè)時(shí)候我們可以把函數(shù)放到過(guò)濾器里面，這樣的話(huà)下次遇到需要處理的就可以直接用，實(shí)現(xiàn)代碼復(fù)用
• 操作: src下新建filter文件->index.js配置->main.js導(dǎo)入->組件直接引用
• 全局在main.js導(dǎo)入,局部在組件里面導(dǎo)入

import Vue from 'vue';
// 定義一個(gè)全局過(guò)濾函數(shù)joinActors
// 處理演員的過(guò)濾函數(shù)
Vue.filter('joinActors',(arr) =>{
    const list = JSON.parse(arr);
    const actorStr = list.map(item=>{
        return item.name;
    })
    return actorStr.join(' ');
})
// 使用方法 item.actors | joinActors


// 格式化日期過(guò)濾函數(shù)
Vue.filter('formatDate',(time)=>{
    let date = new Date(time * 1000)
    let Y = date.getFullYear();
    let M = date.getMonth() + 1;
    // 外國(guó)算的的月比我們小一個(gè)月
    let D = date.getDate();
    let h = date.getHours();
    let m = date.getMinutes();
    let s = date.getSeconds();
    return `${Y}-${M}-${D} ${h}:${m}:${s}`;
})

小結(jié): 定義一個(gè)過(guò)濾器->Vue.filter('函數(shù)名',(參數(shù))=>{return 代碼塊})

• main.js導(dǎo)入

// 導(dǎo)入vue
import Vue from "vue";
import App from "./App.vue";
// 導(dǎo)入vue路由
import router from "./router/index";
// 導(dǎo)入vuex
import store from './store/index'
// 導(dǎo)入過(guò)濾器
import './filter/index'


Vue.config.productionTip = false;

new Vue({
  // 引入store
  store,
  router,
  el: "#app",
  render: h => h(App)
}).$mount("#app");

• 組件使用

<template>
  <div>
    <div>
      <h3>訂單詳情</h3>
      <!-- 利用計(jì)算屬性賦值 -->
      <!-- 下單時(shí)間{{payTime}} -->

      <!-- 使用過(guò)濾器處理賦值 -->
      下單時(shí)間{{endPayTime | formatDate}}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      payOrderId: "2019022319345666801",
      orderId: "",
      delivery: {
        name: "",
        address: "",
        postCode: "",
        phone: "15013795539"
      },
      mobile: "15013795539",
      expressAmount: 0,
      endPayTime: 1550922564,
      endReceiptTime: 0,
      deliveryTime: 0,
      supplierId: 0
    };
  },

// 局部過(guò)濾器
filters:{

},
// 通過(guò)vuex的 $store.commot 方法使用store創(chuàng)庫(kù)里的方法并傳參數(shù)過(guò)去
</script>

<style>
</style>

小結(jié) main.js導(dǎo)入過(guò)濾后->組件直接使用->(參數(shù) | 過(guò)濾函數(shù))