Vuex总结
一、简述对Vuex的理解
1.什么是Vuex：
Vuex是一个专为Vue.js应用程序开发的状态管理模式。
2.使用Vuex的原因：
当我们遇到多个组件共享状态时，多层组件的传值非常繁琐，不利于维护，因此我们把组件的共享状态抽取出来，以一个单例模式管理，在这种模式下，不管在哪个组件都可以获取状态或触发行为
3.什么情况下使用：
<1>虽然Vuex可以帮助我们管理共享状态，但是也附带了更多的概念和框架，增加了学习成本，所以决定是否要使用Vuex要对短期和长期效益进行权衡。
<2>如果应用够简单，最好不要使用Vuex；如果需要构建一个中大型单页应用，可以考虑使用Vuex去更好的再组件外部管理状态。
4.如何使用Vuex：
<1>每一个Vuex应用的核心就是store（仓库），它包含着应用中大部分的状态（state）,store是内存机制，而不是缓存机制，当前页面一旦刷新挥着通过路由跳转亦或是关闭，都会导致store初始化。
<2>Vuex的核心概念分别是：
（1）State: 存放基本数据 ----辅助函数mapState: 当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键。
（2）getters：是从store中的state派生出来的状态，专门来计算state中的数据，相当于state中数据的计算属性 ---辅助函数mapGetters辅助函数: mapGetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性，与state类似
（3）actions: 是专门操作异步请求的数据和业务逻辑的地方，它不能直接变更state中的状态，而是通过commit来调用mutations里的方法来改变state里的数据。 ---辅助函数mapActions 将组建的methods映射为store.dispath调用
（4）mutations：提交mutions是更改Vuex中的状态的唯一方法。mutations必须是同步的，如果要异步需要使用actions。每一个mutations都有一个字符串作为第一个参数，提交载荷作为第二个参数。 ---辅助函数mapMutations 将组建中的methods映射为store.commit调用。
（5）Moules：使用单一状态树，导致应用的所有状态几种到一个很大的对象，但是，当应用变得很大时，store对象会变得臃肿不堪，为了解决以上问题，Vuex允许我们将store分割到模块（modules）。每个模块拥有自己的state、mutations、avtions、grtters。
<3>若要改变state里的数据，则通过actions使用comiit来调用mutations里的方法进而改变state里的数据。
二、路由懒加载
1.懒加载
也叫延迟加载或者按需加载，即在需要的时候进行加载，
2.为什么要使用懒加载
像vue这种单页面应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的内容过多，时间过长，会出现时间的白屏，即使做了loading也是不利于用户体验，而运用懒加载则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时
简单的说就是：进入首页不用一次加载过多资源造成用时过长
3.方式：
（1） 使用vue的异步组件，可以实现路由的懒加载
{
path: '/home',
name: 'home',
component: resolve => require(['../components/home'], resolve)
}
（2） es提出的import(推荐使用这种方式)
const homeFn = () => import('../components/home/home')
const movieFn = () => import('../components/movie/movie')
export default new Router({
routes: [
{
path: '/home',
name: 'home',
component: homeFn
},
{
path: '/movie',
name: 'movie',
component: movieFn
}
] })
路由懒加载代码：
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Home from "../components/home.vue";
import List from "../components/list.vue";
Vue.use(Router)
//es import方式 必须要由一个返回值 所以加载的时候不需要加{}
const Hello = ()=>import("@/components/HelloWorld");
export default new Router({
routes: [
// {
// path: '/',
// name: 'HelloWorld',
// //vue异步组件加载方式
// //component: resolve=>{require(["@/components/HelloWorld"],resolve)}
// component:Hello
// }
{
path:"/home",
name:"home",
component:Home,
children:[],
//路由解耦
//porps:true
},
{
path:"/list",
name:"list",
component:List,
children:[],
//路由解耦
//porps:true
}
]
})
/*
vue异步组件
component:resolve=>{require(["@/components/HelloWorld"],resolve)}
参数1：需要加载的模块
参数2：加载成功的参数
2、es import
*/
箭头函数不带{ }就是自动返回值；
Keep-alive:
组件的缓存，如果当前组件需要进行缓存的情况下，我们需要将当前组件外部，加keep-alive;
actived:huoyu：活跃状态；当前组件是一个显示状态；
deactived: 缓存状态；如果组件进行了切换，那么当前组件就会保存在缓存中；
参数： inclcude 包含： 包含哪些组件进入缓存状态
exclude 排除： 排除哪些组件进入缓存状态
尽量配合component进行使用
router-view 也可以进行缓存，但是include，exclude不生效；
什么时候会用到路由的监听 或者 beforRouteUpdate
当当前组件被复用的时候(没有经历创建和销毁的时候)，当路由发生改变的时候数据是不会发生改变的 需要调用
beforeRouteUpdate或者watch进行监听
路由解耦：
在router路由配置项中添加props:true
在需要接受理由参数的组件中通过props进行接收，如：例如 props:["属性","属性"]props:["id”，“name”]（只适用于parms,不适用于query）
<template>
<div>
<router-view></router-view>
<ul>
<li v-for="(item,index) in goodsList">
<router-link :to="{name:'details',params:{name:item.goodsName,id:item.id}}">{{item.goodsName}}</router-link>
</li>
</ul>
</div>
</template>
<style >
</style>
<script>
import Vuex from "vuex";
export default {
created() {
console.log(this.fn());
},
data(){
return {
goodsList:[
{
id:1,
goodsName:"马蕊"
},
{
id:2,
goodsName:"胡丽霞"
},
{
id:3,
goodsName:"姗姗"
},
{
id:4,
goodsName:"田利利"
}
]
}
},
computed:{
// ...Vuex.mapState({
// list:state=>{
// let arr = state.list;
// var arr1 = arr.map((item)=>{
// console.log(item)
// return item*2
// })
// return arr1
// }
// })
...Vuex.mapState({
a:state=>state.homeStore.a
})
},
methods:{
...Vuex.mapActions({
fn:"homeStore/fn"
})
}
}
</script>
路由：根据用户请求地址不同返回不同的结果
前端路由，后端路由
...扩展运算符：
namespaced: true;
保证当前模块与其他模块之间的命名不产生冲突；
