Hooke

no message

1 <template lang="html"> 1 <template lang="html">
2 <div> 2 <div>
3 - count: {{ count }} 3 + count: {{ count }} <br />
4 - countPlusLocalState: {{countPlusLocalState}} 4 + countAlias: {{ countAlias }} <br />
5 + countPlusLocalState: {{countPlusLocalState}} <br />
6 + localComputed: {{localComputed}}
5 </div> 7 </div>
6 </template> 8 </template>
7 9
...@@ -16,16 +18,21 @@ export default { ...@@ -16,16 +18,21 @@ export default {
16 localCount: 10 18 localCount: 10
17 } 19 }
18 }, 20 },
19 - computed: mapState({ 21 + computed: {
22 + localComputed() {
23 + return 'localComputed'
24 + },
25 + ...mapState({
20 // 箭头函数可以让代码非常简洁 26 // 箭头函数可以让代码非常简洁
21 count: state => state.count, 27 count: state => state.count,
22 // 传入字符串 'count' 等同于 `state => state.count` 28 // 传入字符串 'count' 等同于 `state => state.count`
23 countAlias: 'count', 29 countAlias: 'count',
24 // 想访问局部状态,就必须借助于一个普通函数,函数中使用 `this` 获取局部状态 30 // 想访问局部状态,就必须借助于一个普通函数,函数中使用 `this` 获取局部状态
25 - countPlusLocalState (state) { 31 + countPlusLocalState(state) {
26 return state.count + this.localCount 32 return state.count + this.localCount
27 } 33 }
28 - }), 34 + })
35 + },
29 mounted() {}, 36 mounted() {},
30 methods: {}, 37 methods: {},
31 components: {} 38 components: {}
......
1 <template lang="html"> 1 <template lang="html">
2 <div> 2 <div>
3 - doneTodos: {{doneTodos}} 3 + doneTodos: {{doneTodos}} <br />
4 doneTodosCount: {{doneTodosCount}} 4 doneTodosCount: {{doneTodosCount}}
5 </div> 5 </div>
6 </template> 6 </template>
......
1 import Vue from 'vue' 1 import Vue from 'vue'
2 import Vuex from 'vuex' 2 import Vuex from 'vuex'
3 +import * as types from './types'
3 4
4 Vue.use(Vuex) 5 Vue.use(Vuex)
5 6
...@@ -40,7 +41,7 @@ const store = new Vuex.Store({ ...@@ -40,7 +41,7 @@ const store = new Vuex.Store({
40 } 41 }
41 }, 42 },
42 getters: { 43 getters: {
43 - doneTodos: state => { 44 + [types.DONE_TODOS](state) {
44 return state.todos.filter(todo => todo.done) 45 return state.todos.filter(todo => todo.done)
45 }, 46 },
46 doneTodosCount: (state, getters) => { 47 doneTodosCount: (state, getters) => {
......
1 +export const DONE_COUNT = 'todos/DONE_COUNT'
2 +export const FETCH_ALL = 'todos/FETCH_ALL'
3 +export const TOGGLE_DONE = 'todos/TOGGLE_DONE'
4 +export const DONE_TODOS = 'doneTodos'