Vuex
- computed 计算属性
- getters 用来获取state里的东西
- actions 分派动作
- filter 过滤器
一、computed 计算属性使用
需要对数据(属性进行操作时)，可以把操作函数方法放在这个对象里，然后处理完后直接用对象调用到需要的部分，注意要有return
<template>
<div>
<div>
<h3>订单详情</h3>
<!-- 利用计算属性赋值 -->
下单时间:{{payTime}}
<!-- 直接调用方法名到需要的地方 -->
</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: {
// 处理数据的方法
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创库里的方法并传参数过去
</script>
<style>
</style>
二、getters 应用
getters 是vuex里的一个对象用来获取state里储存的数据
然后映射出去可以直接使用
- 获取数据在store文件夹的index.js下
下列代码都是在vuex对象里的
// 用来获取state里的东西
getters:{
// 定义两个对象。里面有对应处理数据的函数 然后通过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创库里的方法并传参数过去
</script>
<style>
</style>
- 小结：vuex里getters获取数据->外部引用vuex的mapGetters->通过computed计算属性对象->使用...mapGetters(["isLogin"])->然后在引用数据isLogin。
对比 直接访问数据的方法，多了许些步骤，但效果一样，按需求来用
三、actions 分派动作
- actions 分派动作 数据传递流程 store->actions->commit->mutations->state->页面
store文件里的index.js下
actions:{
ISLOGINACTION({ commit }, payload) {
commit('ISLOGIN', payload);
}
// 使用的时候 $store.ISLOGINACTION.commit('ISLOGIN',true)
}
- 小结 : 实际里常使用 $store.commit('ISLOGIN',true) 简洁(跳过了actions步骤)
四、filter 过滤器
- filter ：作用，有时候我们会碰到要单独处理的数据，然后需要编写做处理的方法函数，这个时候我们可以把函数放到过滤器里面，这样的话下次遇到需要处理的就可以直接用，实现代码复用
- 操作: src下新建filter文件->index.js配置->main.js导入->组件直接引用
- 全局在main.js导入,局部在组件里面导入
import Vue from 'vue';
// 定义一个全局过滤函数joinActors
// 处理演员的过滤函数
Vue.filter('joinActors',(arr) =>{
const list = JSON.parse(arr);
const actorStr = list.map(item=>{
return item.name;
})
return actorStr.join(' ');
})
// 使用方法 item.actors | joinActors
// 格式化日期过滤函数
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}`;
})
小结: 定义一个过滤器->Vue.filter('函数名',(参数)=>{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创库里的方法并传参数过去
</script>
<style>
</style>
小结 main.js导入过滤后->组件直接使用->(参数 | 过滤函数)
网友评论