Vuex

• computed 計算屬性
• getters 用來獲取state里的東西
• actions 分派動作
• filter 過濾器

一偏形、computed 計算屬性使用

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

<template>
  <div>
    <div>
      <h3>訂單詳情</h3>
      <!-- 利用計算屬性賦值 -->
      下單時間:{{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
    };
  },
  // 計算屬性對象
  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}`;
    }
  },
};
// 通過vuex的 $store.commot 方法使用store創(chuàng)庫里的方法并傳參數(shù)過去
</script>

<style>
</style>

二囱持、getters 應用

getters 是vuex里的一個對象用來獲取state里儲存的數(shù)據(jù)
然后映射出去可以直接使用

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

下列代碼都是在vuex對象里的
// 用來獲取state里的東西
    getters:{
        // 定義兩個對象儡羔。里面有對應處理數(shù)據(jù)的函數(shù) 然后通過getters映射出去 mapGetters 然后可以通過mapGetters訪問里面的對象
        showFooter:(state)=>{
            return state.showFooter
        },
        isLogin: state => state.isLogin
    },

-外部使用

<template>
  <div>
    <h3>個人中心</h3>
    <!-- <div v-if="$store.state.isLogin"> -->
    <!-- 效果一樣 -->
    <div v-if="isLogin">
      <p>手機尾號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);
    }
  }
};
// 通過vuex的 $store.commot 方法使用store創(chuàng)庫里的方法并傳參數(shù)過去
</script>

<style>
</style>

• 小結(jié)：vuex里getters獲取數(shù)據(jù)->外部引用vuex的mapGetters->通過computed計算屬性對象->使用...mapGetters(["isLogin"])->然后在引用數(shù)據(jù)isLogin程癌。
  對比 直接訪問數(shù)據(jù)的方法，多了許些步驟扫外，但效果一樣莉钙，按需求來用

三、actions 分派動作

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

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

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

四筛谚、filter 過濾器

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

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


// 格式化日期過濾函數(shù)
Vue.filter('formatDate',(time)=>{
    let date = new Date(time * 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}`;
})

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

• main.js導入

// 導入vue
import Vue from "vue";
import App from "./App.vue";
// 導入vue路由
import router from "./router/index";
// 導入vuex
import store from './store/index'
// 導入過濾器
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>
      <!-- 利用計算屬性賦值 -->
      <!-- 下單時間{{payTime}} -->

      <!-- 使用過濾器處理賦值 -->
      下單時間{{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
    };
  },

// 局部過濾器
filters:{

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

<style>
</style>

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