1. vue.cli项目中src目录每个文件夹和文件的用途
assets:静态资源 components:组件 router:路由配置 view:视图 main.js:入口文件 app.vue:应用主组件
2. Vuex
Vuex是什么？
Vuex 可以帮助我们集中式存储管理共享状态。
哪些场景下使用Vuex？
中大型以上的单页面、组件之间的状态、音乐的播放、登录状态、加入购物车等等
为什么要使用Vuex
- 多个视图依赖于同一状态。
- 来自不同视图的行为需要变更同一状态。
组件间传参的方式对于多层嵌套的组件来说非常繁琐，耦合性太高，代码维护性差，所以我们要将组件的共享状态提取出来，使每个组件都可以获取状态、触发行为。
Vuex 和单纯的全局对象有以下两点不同：
- Vuex的状态存储是响应式，store中的状态发生改变时，相应组件中也会发生更新;
- 不能直接改变store中的状态值，唯一改变state的方法就是提交mutation;
- 全局对象可以直接修改，但是他不能响应式的更新;
1. state
每一个组件使用state,都需要引入store：
将store实例从根组件注入到子组件中（Vue.use(vuex)）
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
在子组件中可以通过this.$store.state访问。
如何在组件中获取vuex的状态？
- 在计算属性中返回状态值，每次状态值发生改变时，都会重新求取计算属性，触发更新相应的DOM。
computed：{
属性(){
return this.$store.state.属性
}
}
- mapState辅助函数
import {mapState} from "vuex";
computed:{
...mapState({
属性：state=>state.属性
//字符串传参
["state1","state2"]
})
}
2. mutation
更改store中state的状态值的唯一方法是提交mutation。
事件类型（type）+回调函数
回调函数为更改状态的地方，有两个参数，第一个为state,第二个为载荷payload(多数情况下为对象)
mutations:{
increment（state,{payload}）{
this.$store.state+=payload
}
}
调用：
this.$store.commit("increment",{payload:10})
this.$store.commit({
type:"increment",
payload:10
})
import {mapMutations} from "vuex";
this.increment({payload:10})
mutation必须是同步函数？
因为我们调试时要知道state状态的上一状态和下一状态，触发mutation时，在异步执行时是无法追踪状态的。（在mutation中有多个回调时，无法确定哪个回调）
3. action
用于提交mutation,不能直接修改store中的状态值；
action可以包含任何异步操作；
