参考https://blog.csdn.net/yfm120750310/article/details/111353963

18 | 为什么需要Vuex

18.1 为什么需要Vuex

provide和inject虽然能够实现层层传递的数据管理，但对于一个大的管理系统而言会显得有些繁琐，我们需要一个大型的状态管理系统。

Vuex不采取组件components相关的provide和inject。

Vuex不采取组件components相关的provide和inject。

18.2 补充说明–Vuex的特性介绍

https://blog.csdn.net/qq_56989560/article/details/124706021

18.3 补充说明-安装Vuex3失败

https://www.cnblogs.com/huifeidezhuzai/p/16378841.html

19 | 如何在Vue中使用Vuex

19.1 Vuex基本语法

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({//数据，相当于datastate: {},getters: {},//里面定义方法，操作state方发mutations: {},// 操作异步操作mutationactions: {},modules: {},
})

19.2 state最简单的例子return this.$store.state.count

• main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'Vue.use(Vuex)
Vue.config.productionTip = falseconst store = new Vuex.Store({state: {count: 0,},
})new Vue({store,render: h => h(App),
}).$mount('#app')

• App.vue

19.3 mutations无参数commit(‘increment’)

• main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'Vue.use(Vuex)
Vue.config.productionTip = falseconst store = new Vuex.Store({state: {count: 0,},mutations:{increment(state){state.count++}}
})new Vue({store,render: h => h(App),
}).$mount('#app')

• App.vue

19.4 mutations有参数commit(‘increment’,2)

• main.js

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'Vue.use(Vuex)
Vue.config.productionTip = falseconst store = new Vuex.Store({state: {count: 0,},mutations:{increment(state,n){state.count +=n}}
})new Vue({store,render: h => h(App),
}).$mount('#app')

• App.vue

19.5 actions那里是increment({state})，也可以处理同步

• main.js：注意对比mutations和actions的区别----如参数

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'Vue.use(Vuex)
Vue.config.productionTip = falseconst store = new Vuex.Store({state: {count: 0,},mutations:{increment(state){state.count ++}},actions:{increment({state}){state.count ++}}
})new Vue({store,render: h => h(App),
}).$mount('#app')

• App.vue

19.6 actions那里是increment({state}),setTimeout延迟3秒

• main.js：注意对比mutations和actions的区别----如参数、settimeout

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'Vue.use(Vuex)
Vue.config.productionTip = falseconst store = new Vuex.Store({state: {count: 0,},mutations:{increment(state){state.count ++}},actions:{increment({state}){setTimeout(()=>{state.count ++},3000)}}
})new Vue({store,render: h => h(App),
}).$mount('#app')

• App.vue

19.7 getters相当于计算属性

• main.js：getters增加doubleCount方法

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'Vue.use(Vuex)
Vue.config.productionTip = falseconst store = new Vuex.Store({state: {count: 0,},mutations:{increment(state){state.count ++}},actions:{increment({state}){state.count ++}},getters: {doubleCount(state){return state.count*2},},
})new Vue({store,render: h => h(App),
}).$mount('#app')

• App.vue：{{ $ store.getters.doubleCount}}

19.8 完整的例子：一个简单的计数器的例子，在main.js中引入Vuex

1)在main.js中引入Vuex

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'Vue.use(Vuex)
Vue.config.productionTip = falseconst store = new Vuex.Store({state: {count: 0,},mutations: {increment(state) {state.count++}},actions: {increment({commit}) {setTimeout(()=>{// state.count++ // 不要对state进行更改操作，应该通过commit交给mutations去处理commit('increment')}, 3000)}},getters: {doubleCount(state) {return state.count * 2}}
})new Vue({store,render: h => h(App),
}).$mount('#app')

2)APP.vue中， $ store.dispatch对应的是action的定义，$ store.commit对应的是mutations 的定义：

$ store 是如何是如何挂载到实例 this 上的？==>通过new Vue中放置store

19.9 疑惑点：// state.count++ // 不要对state进行更改操作，应该通过commit交给mutations去处理?

20 | Vuex核心概念及底层原理

20.1 Vuex核心概念

20.2 Vuex底层原理

• 简化版min-vuex.js响应式核心代码（源码部分看看就行，也可参考链接中的Vuex的核心概念和底层原理）
  

21 | Vuex最佳实践

21.1 简写方式

前面提到的五个核心概念的取值，vuex提供了很多简写的方式：

21.2 购物车示例（难）

1）效果

2)文件架构

3）代码（见链接）

• main.js
• App.vue
• components/ProductList.vue
• components/ShoppingCart.vue
• store/index.js
• store/modules/cart.js
• store/modules/products.js

4）代码
computed的两种写法

  computed: {...mapState({checkoutStatus: state => state.cart.checkoutStatus}),...mapGetters('cart', {products: 'cartProducts',total: 'cartTotalPrice'}),// ...mapGetters({//   products: 'cart/cartProducts',//   total: 'cart/cartTotalPrice'// })},// computed: {//   checkoutStatus(){//     return this.$store.state.cart.checkoutStatus//   },//   products() {//     return this.$store.getters['cart/cartProducts']//   },//   total() {//     return this.$store.getters['cart/cartTotalPrice']//   }// },

22 | Vue Router的使用场景

22.1 为什么需要Vue Router

传统开发模式下，每个url都对应着一个html页面，每次切换url的时候会引起页面的重新加载，在这种情况下诞生了单页面（spa）开发模式，用户在切换url的时候不在是执行页面的变化，而是根据我们的逻辑进行执行，返回数据。

22.2 安装Vue Router

https://blog.csdn.net/qq_41552648/article/details/125807963

22.3 router-view

router-view写在什么地方，component组件就匹配到什么地方。
1.router-view是路由的出口,没有它页面则没法进行显示。
2.二级路由的出口对应在一级路由里面进行配置。
3.一个router-view只能存储一个组件,当路径发生改变,之前的会消失。
https://blog.csdn.net/qq_59076775/article/details/124700670

22.4 Vue Router代码

1）main.js：在main.js中引入路由

import Vue from 'vue'
import VueRouter from 'vue-router' 
import App from './App.vue'
import routes from './routes'Vue.config.productionTip = falseVue.use(VueRouter)const router = new VueRouter({// mode: 'history',routes,
})new Vue({router,render: h => h(App),
}).$mount('#app')

2）App.vue：在里面加入了组件。

3）routes.js：在路由配置列表中则进行如下配置

import RouterDemo from './components/RouterDemo'
import RouterChildrenDemo from './components/RouterChildrenDemo'const routes = [{ path: '/foo', component: RouterDemo, name: '1' },{ path: '/bar', component: RouterDemo, name: '2' },// 当 /user/:id 匹配成功，// RouterDemo 会被渲染在 App 的  中{ path: '/user/:id', component: RouterDemo, name: '3',props: true,children: [{// 当 /user/:id/profile 匹配成功，// RouterChildrenDemo 会被渲染在 RouterDemo 的  中path: 'profile',component: RouterChildrenDemo,name: '3-1'},{// 当 /user/:id/posts 匹配成功// RouterChildrenDemo 会被渲染在 RouterDemo 的  中path: 'posts',component: RouterChildrenDemo}]},{ path: '/a', redirect: '/bar' },{ path: '*', component: RouterDemo, name: '404' }
]export default routes

4）components/RouterDemo.vue

5）components/RouterChildrenDemo.vue

22.5 （未解决）debug：链接显示不出来，打开Console才发现跟warning:< router-link v-slot=“{ navigate, href }” custom >< /router-link >

今天遇到的一个坑，发现是vue.js的版本问题，凡是v2.6.0到v2.6.8都无法正常使用标签，不知道还有没有其他版本不能使用！

22.6 debug：使用脚手架产生vue3项目时，出现报错export ‘default’ (imported as ‘VueRouter’) was not found in ‘vue-router’

warning in ./src/main.js

export ‘default’ (imported as ‘VueRouter’) was not found in ‘vue-router’ (possible exports: NavigationFailureType, RouterLink, RouterView, START_LOCATION, createMemoryHistory, createRouter, createRouterMatcher, createWebHashHistory, createWebHistory, isNavigationFailure, loadRouteLocation, matchedRouteKey, onBeforeRouteLeave, onBeforeRouteUpdate, parseQuery, routeLocationKey, routerKey, routerViewLocationKey, stringifyQuery, useLink, useRoute, useRouter, viewDepthKey)

22.7 error ‘routes‘ is assigned a value but never used no-unused-vars 关于在搭建vue脚手架时使用vue-router报错的问题

https://blog.csdn.net/Lydia214/article/details/125453374
package.json文件在rules中配置 “no-unused-vars”: “off” 解决（关闭提示）

23 | (Vue Router)选择何种模式的路由及底层原理

23.1 路由种类

23.2 底层原理

23.3 路由种类的变更代码mode

1）main.js：mode: 'history'

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
import routes from './routes'Vue.config.productionTip = falseVue.use(VueRouter)const router = new VueRouter({mode: 'history',routes,
})new Vue({router,render: h => h(App),
}).$mount('#app')

24 | Nuxt解决了哪些问题？

24.1 Nuxt解决了哪些问题？

我们都知道spa单页面的缺点有以下几种：

• 不利于SEO（搜索引擎爬取单页面是没有内容的，它不会出现再搜索的结果中）
• 首屏渲染时间长

针对这两个缺点，我们会有一些方案来解决：

• 服务端渲染SSR
• 预渲染Prerendering

Prerendering预渲染

• 主要适用于静态站点

SSR

• 动态渲染
• 配置繁琐

那么针对这些问题Nuxt就是去做这些操作：

• 静态站点
• 动态渲染
• 简化配置

25 | Nuxt核心原理是什么？

25.1 Nuxt的核心原理

26 | UI组件库对比：Element UI、Ant Design Vue、iView

26.1 UI组件库对比

27 | 提升开发效率和体验的常用工具：ESLint、Prettier、vue-devtools

Vetur

• 语法高亮
• Lint 检查
• 格式化

ESLint

• 代码规范
• 错误检查

Prettier

• 格式化

Vue DevTools

• 集成Vuex
• 可远程调试

28 | 单元测试的重要性及其使用（略）

29 | 生态篇习题解答（上）—（略）

30 | 生态篇习题解答（下）—（略）