vuex 3.x All In One
vuex 3.x All In One
mapGetters 辅助函数
https://codesandbox.io/s/vuex-store-mapper-ouikr
https://vuex.vuejs.org/zh/guide/getters.html#mapgetters-辅助函数
<template>
<div id="app">
<HelloWorld msg="Hello Vue in CodeSandbox!" v-if="show" />
<!-- <img alt="Vue logo" src="./assets/logo.png" width="25%" /> -->
<span>watch num = {{ num }}</span>
<br />
<span>store count = {{ count }}</span>
<br />
<span>computedStoreCount = {{ computedStoreCount }}</span>
<br />
<span>doneCount = {{ doneCount }}</span>
<br />
<button @click="add">add</button>
<section>
<p>income money ={{ receivedMoney }}</p>
</section>
<button @click="addMoney">add money</button>
<section>
<p>loading = {{ isLoading }}</p>
<p>async data = {{ JSON.stringify(fetchData, null, 4) }}</p>
</section>
<button @click="fetch">fetch async data</button>
</div>
</template>
<script>
// import HelloWorld from "./components/HelloWorld";
// const log = console.log;
import { mapGetters, mapMutations, mapActions } from "vuex";
import log from "@/utils/log";
export default {
name: "App",
components: {
// HelloWorld,
},
data() {
return {
num: 0,
show: false,
};
},
methods: {
// 数组
...mapActions([
"asyncAdd",
]),
// Object 对象
...mapActions({
asyncPlus: "asyncAdd",
}),
// ...mapActions([
// 'increment', // 将 `this.increment()` 映射为 `this.$store.dispatch('increment')`
// // `mapActions` 也支持载荷:
// 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.dispatch('incrementBy', amount)`
// ]),
// ...mapActions({
// add: 'increment' // 将 `this.add()` 映射为 `this.$store.dispatch('increment')`
// }),
...mapMutations([
// keys, 数组
"increment",
// 将 `this.increment()` 映射为 `this.$store.commit('increment')`
"addincome",
// `mapMutations` 也支持载荷:
// 'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
]),
...mapMutations({
// 重命名, 对象
plus: "increment",
}),
add() {
// this.$store.commit(`increment`);
// this.increment();
log(`plus 🧸`);
this.plus();
},
fetch() {
// this.$store.commit(`increment`);
// this.increment();
log(`fetch async data 🍎`);
// this.asyncPlus();
this.asyncPlus({
datas: [1,2,3],
});
},
addMoney() {
// payload 负载
// this.$store.commit(`addincome`, {
// salary: 100,
// });
// 对象风格
log(`addincome 负载 ✅`);
this.addincome({
type: "addincome",
salary: 100,
});
// this.$store.commit({
// type: "addincome",
// salary: 100,
// });
},
},
watch: {
// 监听属性, watch props
count: function () {
// watch 计算属性 OK
log(`watch count`);
this.num = this.$store.state.count;
// return this.$store.state.count;
},
// isLoading: function() {
// return this.$store.state.loading ? "✅" : "❌";
// },
},
computed: {
// 计算属性, computed attributes
isLoading: function() {
return this.$store.state.loading ? "✅" : "❌";
},
count: function () {
log(`computed count`);
return this.$store.state.count;
},
// 使用对象展开运算符将 getter 混入 computed 对象中
// ✅ 参数是 数组
...mapGetters([
"computedStoreCount",
"loading",
"fetchData",
// ...
]),
// 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
// ✅ 参数是 Object, 重命名
...mapGetters({
doneCount: "doneStoreCount",
receivedMoney: "receivedIncome",
}),
},
mounted() {
this.num = this.$store.state.count;
// 分发 Action
// this.$store.dispatch('increment');
// 以载荷形式分发
// this.$store.dispatch('incrementAsync', {
// amount: 10
// });
// 以对象形式分发
// this.$store.dispatch({
// type: 'incrementAsync',
// amount: 10
// });
},
};
</script>
<style>
#app {
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
refs
©xgqfrms 2012-2020
www.cnblogs.com 发布文章使用:只允许注册用户才可以访问!
本文首发于博客园,作者:xgqfrms,原文链接:https://www.cnblogs.com/xgqfrms/p/14143877.html
未经授权禁止转载,违者必究!