-
Notifications
You must be signed in to change notification settings - Fork 0
/
vuex-getter.html
80 lines (78 loc) · 2.01 KB
/
vuex-getter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<!DOCTYPE html>
<html>
<head>
<title>Dynamic Components Example</title>
<script src="./vue.js"></script>
<script src="./vuex.js"></script>
</head>
<body>
<div id="app"></div>
<script>
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
count: 18,
todos: [
{ id: 1, text: "...", done: true },
{ id: 3, text: "...", done: true },
{ id: 2, text: "...", done: false },
],
},
getters: {
doneTodos: (state) => {
return state.todos.filter((todo) => todo.done);
},
doneTodosCount: (state, getter) => {
return getter.doneTodos.length;
},
getTodoById: (state) => (id) => {
return state.todos.find((ele) => ele.id === id);
},
},
});
const Counter = {
template: `<div @click="getTodoById">{{ count }}<div>{{ doneTodosCount }}</div></div>`,
computed: {
count() {
return this.$store.state.count + "哈哈";
},
doneTodosCount() {
return this.$store.getters.doneTodosCount;
},
},
methods: {
getTodoById: function () {
let ret = this.$store.getters.getTodoById(2);
console.log(ret);
},
},
};
const Counter2 = {
template: `<div @click="getTodoById">{{ count }}<div>{{ doneTodosCount }}</div></div>`,
computed: {
...Vuex.mapGetters(["doneTodosCount", "getTodoById"]),
},
methods: {
getTodoById: function () {
let ret = this.$store.getters.getTodoById(2);
console.log(ret);
},
},
};
new Vue({
el: "#app",
data: {},
computed: {},
components: {
Counter,
},
store,
template: `
<div class="app">
<counter></counter>
</div>
`,
});
</script>
</body>
</html>