Vue Basics2 - Githubissues

dlrandy commented 6 years ago

Vuex使用集中化的store管理app的全局状态；它引入了几个新概念来帮助管理和调试App的state

随着众多组件之间的通信的复杂度增加，state的同步就会越复杂且不可控，导致code不好维护，难于理解。

单向数据流的好处是App的逻辑和数据流更为清晰。坏处就是需要理解一些新概念，偶尔的写一些code。

使用中心化的store，使得组件之间不需要知道彼此，也不需要依赖组件来同步数据。

Vuex的中心元素是store，它集中数据到一个model，这个model遵循着良好的设计模式。

store包含： state--> data; getters-->computed; mutations-->修改state； actions-->异步API和mutation；

VUE Component------dispatch-->Actions------Commit--->Mutations -------Mutate---->State----->render----> Vue Components

一旦设置了Store / Router, $store，$router, $route就在所有的组件里可用 state是只读的，不该直接修改它，也就失去了使用Vuex的好处

mutation是同步函数，接收state作为第一个参数和一个可选的payload，最好也不要做异步的操作

mutation相当于一个事件，有类型有handler函数

Mutation是同步的主要是为了调试

Vuex的严格模式，主要用于开发阶段，可以避免在同步的mutation之外修改state。不用在production上使用，影响性能

getters是一个函数，接收state和其他getters.不推荐直接访问$store的state，最好是使用getters，因为它允许你改变获取数据的方式而不必修改使用它的组件。例如改变state的结构调整对应的getters，而不会影响component。

actions主要用于store的操作的，它既可以commit mutation也可以执行异步操作，actions和mutations相似，也带有一个类型和handler。handler不能直接调用，需要store来dispacth一个action 类型，action的handler接收两个参数context和payload，context提供和store相关的commit,dispatch,state和getters功能

在组件里使用actions而不是mutations，actions就是app逻辑的抽象

dlrandy commented 6 years ago

Mapping helpers state getters mutations， actions 这些函数根据store里对应的getters和action生成适当的计算属性和方法，所以你不必须每次都敲this.$store.getters和this.dispatch.

helpers的参数要么是组件里同名映射的类型数组，要么是一个对象，key是别名，value是类型值

因为组件里的getters和actions帮助隔离状态和相关的逻辑

同步store和router使用vuex-router-sync,它将在state里暴露当前的路由，state.route而且每次路由改变都会提交一个mutation。

vuex的modules和mainstore成分一样，modules里可以还有module，module它有一个特殊的namespaced的属性（true），main store里的modules，用于存放module，

默认访问某一个module的state的时候,store.state.maps, 每一次都这么访问有些啰嗦，所以有了Namespaced的module，namespaced的告诉vuex加上命名空间在各个构件之前

#1
mapGetters({
center: 'maps/center',
zoom: 'maps/zoom',
})
#2
mapGetters('maps',[
'center',
'zoom',
]);
#3
mapGetters('some/nested/module'',[])
#4
import {
createNamespaceHelpers
} from vuex;
const { mapGetters  } = createNameSpacedHelpers('maps');
export default {
computed: mapGetters([
'center',
'zoom',
])
}

访问全局元素，在namespaced的module里可以访问root的state和root的getters

someGetters: (state, getters, rootState, rootGetters) => {}

在actions里，也可以访问context的rootGetters，而且你可以使用{root: true}的option在commit或者dispatch里。

vue里的render方法主要的好处就是更接近compiler，有处理template的js的所有能力，特别是对于动态模板

Vue不会直接使用新的虚拟DOM替换掉真实的DOM树，因为这样有很多的DOM操作，这个代价有些高。为了更好的性能，Vue在两个树之间做了一些diff，只对那些使得真实DOM匹配虚拟Dom的dom操作

vue-cli默认开启了jsx

最佳实践重新命名namespaced helpers，因为可能在另一个模块里添加这个helper

在jsx里tag的第一个字母的大小写很重要，小写会被认为是html元素，大写则被认为是变量。

vue文件里不能同时拥有template和render

dlrandy commented 6 years ago

scoped的slots传递数据给parent

<slot :results="results" />

<Search>
<template slot-scope="props">
<div>{{props.results.length}} results</div>
</template>

</Search>

template不是必须的

vue里的每个组件实例子啊创建的时候，总要做一些准备工作，比如数据响应式系统，组件声明周期等。一个例外就是functional组件，它们也没有state，不能使用this

export default {
functional: true,
render(h, { props, children }){
return h(`h${props.level}`, children);
}
}
还可以在template上添加functional属性

render方法会有一个context参数包含props, event Listeners, childen content, slots和其他数据

在写functional组件的时候，可以把所有的属性作为props，也可以通过context.data 获取

dlrandy / note-issues

Vue Basics2 #81