首页 Vue

# Vue 注意事项

一、使用 watch 监听数组时：

当使用 watch 监听数组时，要将 deep 设置为 true，这样才能监听到数组内部的操作，而不是只监听引用是否变化，当需要使用 newValue 和 oldValue 时，监听部分需要写数组的拷贝而不是数组本身（否则当数组引用不变而堆数据变化时，oldValue 和 newValue 都是变化之后的数值。）

# Vue 项目创建过程：

（
①创建项目 vue create 项目名
②安装开发依赖： yarn add 包名@版本号 -D
③安装生产依赖: yarn add 包名 ，并在 main.js 中引入和全局属性

）
css 选择器和权重的计算
font-size 和字体详解（小写 x 为基准）
小黑记事本案例
vue 中结合网络数据库开发应用（axios 网络请求库）、
前端避雷技术：Jequry、Angular js、php、rubian rails 构建应用程序
form-serialize 插件获取表单的各项

# Vue 知识点

{

Vue 文件分类：将 Vue 文件分为页面文件和可复用的文件

# 一、vue 项目初始化：

（①vue create 文件名②cd 进入文件夹③yarn add 添加引用包④main.js 引入样式 (引用方式)⑤vue.config.js 中禁用 eslint 检查)

# 二、vue 组件使用：

（①在 components 文件夹下添加 vue 文件组件②在 App.vue 中 import 组件 form' 路径 '③在 export default 的 componets 下注册组件，有些可简写④div 中用组件名使用组件）

# 三、vue 中 export default 中的属性：

（name,components,props,created,mounted,data,methods，watch,computed,activated,deactivated）

# 四、vue 中使用 axios

（①下载 axios 包（yarn add axios）②在 main.js 中引入 (impoort axios from 'axios')③配置基础地址（axios.defaults.baseURL="https://www.escook.cn"）④将 axios 挂载到 Vue 原型上，作为全局属性（在 main.js 中添加：Vue.prototype.$axios=axios），⑤App.vue 的 created 中使用全局属性 axios⑥接口地址为 /api/cart⑦进行数据渲染）

# 五、动态组件：

（①创建要被切换的组件样式②引入到要展示的 vue 文件中，注册③变量承载要显示的组件名④设置承载点 <component :is="变量"></component>⑤点击按钮，切换 comName 的值为要显示的组件名⑥使用 vue 内置的 keep-alive 组件，将抱起来的组件缓存起来 < keep-alive></keep-alive> )

# 六、组件插槽

（①通过 slot 标签占位，让组件内可以接受不同的标签结构样式，为了让封装的组件显示不同的标签结构（灵活），②使用：在模板中添加 <slot> 默认内容 </slot > 占位，引入模板时在模板内添加占位标签里的内容③具名插槽：子组件，在 slot 上绑定 name="name 值"，在使用组件，传入自定义标签，用 template 标签内加 v-slot="name 值"）④作用域插槽：使用子组件时在 template 中使用 scope

# 七、自定义指令

（①全局注册：Vue.directive ("指令名",{"inserted" (el,binding){对 el 标签扩展额外的功能②局部注册：export.default 中添加配置项 directives:{"指令名":{inserted (el,binding){对 el 进行操作}}}})③使用：在标签内添加属性:v - 指令名 ="binding.value"(将自定义传值与指令操作相关联)）自定义指令中除了 inserted 方法还有 update 方法

# 八、父子组件数据交互

（①在父组件中引入和注册并使用②子组件定义好 props 属性，设定值得类型与校验③子组件中使用设定的 props 数据④父组件 data 中定义好子组件中 props 属性中的相应类型的值⑤父组件中使用时：绑定子组件 props 中的数据）

# 九、切换组件显示

（①）

# 十、vue 组件之间传值

（一、父组件给子组件传值：①父组件使用子组件时，: 绑定值，并在 data 中注册②子组件 props 中注册相同名称的值）
（二、子组件给父组件传值：①在子组件中使用 this.$emit 方法自定义一个事件并传值②在父组件中使用该事件通过函数操作传来的值）

# effct 高级

# effectScope

effectScope 是 vue3.2 新增的一个 api，用于创建一个副作用作用域，内部自动捕获副作用，进行响应化设置。

// 一个 scope 可以执行一个 run 函数（接受一个函数作为参数，返回该函数的返回值，并且捕获所有在该函数执行过程中创建的 effect，包括可以创建 effect 的 API）
// 例如：computed，watch，watchEffect 等。
let a = 1;
const scope = effectScope();
scope.run(()=>{
 const doubled = computed(()=>a * 2);
 watch(doubled,()=>console.log(doubled.value))
 watchEffect(()=>{ //watchEffect 函数会自动检测内部的 effect 副作用，进行响应化设置
  console.log('Count',doubled.value);
 })
})
scope.stop();
// 当调用 scope.stop)() 函数时，所有被捕获的 effect 都会被取消，包括 nested scopes 也会被递归取消

# 嵌套 scope

嵌套 scope 也会被他们的父级 scope 收集，并且当父级 scope 销毁的时候，所有的后代 scope 也会被递归销毁。

const scope = effectScope()
scope.run(() => {
  const doubled = computed(() => counter.value * 2)
  // not need to get the stop handler, it will be collected by the outer scope
  effectScope().run(() => {
    watch(doubled, () => console.log(doubled.value))
  })
  watchEffect(() => console.log('Count: ', doubled.value))
})
// dispose all effects, including those in the nested scopes
scope.stop()

effectScope 接受一个参数可以在分离模式下创建，detached scope 不会被父级 collect

let nestedScope
const parentScope = effectScope()
parentScope.run(() => {
  const doubled = computed(() => counter.value * 2)
  // with the detected flag,
  // the scope will not be collected and disposed by the outer scope
  nestedScope = effectScope(true /* detached */)
  nestedScope.run(() => {
    watch(doubled, () => console.log(doubled.value))
  })
  watchEffect(() => console.log('Count: ', doubled.value))
})
// disposes all effects, but not `nestedScope`
parentScope.stop()
// stop the nested scope only when appropriate
nestedScope.stop()

# onScopeDispose

全局钩子函数，相当于副作用域中的 onUnmounted 功能，不同的是它工作在 scope 中，而不是当前 instance 中。

这使得 composable functions 可以通过他们的 scope 清楚他们的副作用。

需要注意的是：由于 setup () 默认会为当前 instance 创建一个 scope，所以当没有明确声明一个 scope 的时候，onScopeDispose 等同于 onUnmounted。

import { onScopeDispose } from 'vue'
const scope = effectScope()
scope.run(() => {
  onScopeDispose(() => {
    console.log('cleaned!')
  })
})
scope.stop() // logs 'cleaned!'

# getCurrentScope

通过 getCurrentScope 函数，可以获得当前 scope 作用域

import {getCurrentScope} from 'vue';
getCurrentScope(); // 返回当前 scope 作用域或者 undefined

# Vue-router

①安装 npm i vue-router@(vue2 用 3 的版本，vue3 用 4 版本)

②安装：运行命令 yarn add vue-router 安装

③配置：src 下新建 router 文件夹，下面的 index.js 中进行配置：

imprt Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

④创建路由组件：src 下的 views 文件夹下新建 vue 页面

⑤创建路由组件：在 router 里 index.js 中引入：

import Home from '../views/Home.vue'

⑥配置路由表：将路由与组件进行映射：

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About },
  // 更多路由配置...
]

⑦创建 router 实例

const router = new VueRouter({
  routes
});

⑧Vue 中挂载 router

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

effect

# 十二、跨组件传值（没有引用关系）

（①创建文件夹 EventBus，下面创建 index.js 文件，文件中引入 Vue，并默认导出空对象②）
十三、this.refs获取组件,通过组件中ref属性，调用组件中的函数（①组件使用时添加ref属性，使用时通过this.refs获取组件 , 通过组件中ref属性，调用组件中的函数（①组件使用时添加ref属性，使用时通过this.refs.ref 属性。函数名 () ）
十四、this.nextTick(fn())方法中等待DOM更新后触发nextTick(fn(){})方法中等待DOM更新后触发 nextTick 中的函数（ref 中的函数会在 DOM 更新之前触发，DOM 更新是异步任务），他可以保证我们在调用子组件的方法时使用到的数据是最新的数据。nextTick函数原地返回一个Promise对象，主动在js中触发标签事件：获取DOM对象，调用事件方法 十五、name属性的作用：注册时可以定义自己的名字 十六、组件缓存组件， 十七、动态组件：十八、组件插槽（具名插槽）：①目的：为了让封装的组件显示不同的标签结构 ②使用：占位(**注意vue2中，只能使用v-slot，vue3中只能使用#name值) ③使用定义的组件，传入具体的标签替换到slot ③插槽默认内容，子组件slot内部书写默认内容④作用域插槽：使用子组件内的变量：(方法:在slot上绑定属性和子组件内的值，在使用组件，传入自定义标签，父组件中用template标签scope属性） 十九、自定义指令：一、①全局方法②局部注册 二、自定义指令传值 自定义指令的生命周期:①bind②inserted③update④componentUpdated⑤unbind 二十、Vue生命周期【创建，挂载，更新，销毁】 （1）beforeCreated 此时拿不到data中的数据（2）created data和methods初始化之后，此时可以拿到变量 （3）beforeMount 挂载之前拿不到真实的DOM （4）mounted 挂载之后，可以使用真实DOM （5）beforeUpdate 真实DOM更新之前（6）updated 更新之后，当数据发生变化并更新页面后执行，可以获取更新之后的DOM （7）beforeDestroy 销毁之前（8）destroyed 销毁之后 二十一、通过ref获取标签里面的对象（尤其是组件）this.refs. 值获取组件对象【组件通信，但不常用】
二十二、this.$nextTick (fn ()) 原地返回 Promise 对象，使用 $nextTick 可以在下一次 DOM 更新周期结束之后执行回调函数，确保在更新后进行相关操作。
二十三、动态组件:<component :is=''> 多个组件在同一个挂载点出现
二十四、组件缓存 <keep-alive></keep-alive > 将包起来的组件缓存起来
二十三、在使用组件缓存的时候，会多出两个钩子函数：activated 激活状态 与 deactivated 失去激活状态
二十四、slot 组件插槽：在组件内部不确定内容的位置设置 slot 标签，标签内是默认内容，父组件使用组件时中间的内容是插槽的内容
二十五、作用域插槽（使用插槽时，想使用子组件内的变量）①子组件在 slot 上 bind 绑定属性和值②使用组件时用 v-slot = 名 获取到组件对象，进而使用组件对象中绑定的属性和值

# 二十六、Vue-router 路由系统

①下载 vue-router 路由系统使用
yarn add vue-router
②在 main.js 中引入 VueRouter 函数，和带切换的页面
import VueRouter from 'vue-router'
import My from '@/views/my'
③添加到 Vue.use（）身上 - 注册全局 RouterLinkRouterView 组件
Vue.use (VueRouter)
④创建路由规则数组 - 路径和组件名对应关系
const routes = [{path:'/my',component:My},{其他}]
⑤用规则生成路由对象
const router = new VueRouter ({
routes })
⑥将路由对象注入到 new Vue 实例中
new Vue ({
el: '#app',
router, // 将路由对象注入到 Vue 实例中
render: h => h (App)
});
⑦App.vue 中用 router-view 标签作为挂载点，切换不同的路由页面
<router-view></router-view>
---------------export default router; 导出之后可以全局进行引入 (App.vue 中 export default {router,})
二十七、声明式导航（传参），①可以用 <router-link to="url"></router-link>，其中 to 里面不用写 #号。标签来代替要跳转到指定页面的 a 标签（本质上相同，但是添加了自带类名，自带导航高亮）②跳转传参：方法一：在 router-link 中的 to 属性上传值 ，to="url/path? 参数名 = 值"。在视图 vue 的标签中 使用。方法二： 定义路由规则时添加路径 {path：”/first/:name “ ” ,component:First}。然后传值 < router-link to="/first/ 值"></>。再 使用

二十八、路由重定向，在路由规则中进行匹配 ({path:"/",redirect:"/find"})
二十九、路由 404 设置，找不到页面时进行返回 404 页面（404 一定要在路由规则末尾），使用 {path:"*",component:NotFound}
三十、路由模式::①hash 路由：url/#/home（哈希路由可以直接被浏览器识别）②history 路由：url/home③将 hash 路由更改为 history 路由：在 new VueRouter 配置项中 mode:"history"（* 注意 history 路由会将路径中识别为文件夹，要在服务器端进行设置）
三十九、路由守卫（main.js 中对路由权限进行和判断）
router.beforeEach(to,from,next)=>{
//next是一个函数体，只有next()执行才会让路由正常跳转，next(false)则停留，next("修改到另一个路由路径"，不执行则不跳转)
router.beforeEach((to,from,next)=>{
if(to.path === '/my' && isLogin === false){
alert('请登录'); next(false)
}else{ next() }})}
三十一、编程式导航（js 方式跳转路由，先给标签添加点击事件，然后将路径作为值传进函数），接着在函数内部，方法一：this.router.push(path:"函数中的路径值")方法二：this.router.push({path:"函数中的路径值"}) 方法二：this.router.push ({name:"路由名称"}) 注意用 name 跳转时，浏览器上的 url 不会改变（无感知跳转，方便修改）
三十二、编程式导航（跳转传参）方法一：①this.router.push(path（或name）:"路由路径",name:”路由名“，query:"参数名"：值)②使用时用<!−−swig2−−>方法二(使用path时会忽略params)：this.router.push({path（或name）:"路由路径",name:”路由名“，query:{" 参数名"：值}})②使用时用 方法二(使用path时会忽略params)：this.router.push ({name:"路由名称",name:” 路由名 “，params:{"
参数名"：值}})②使用时用
（可以组合但是 path 和 params 组合不能一起使用）
三十三、路由嵌套：①创建二级路由页面：views 文件夹下新建文件夹和 vue 文件②main.js 中配置二级路由 {path:"/first",component:First,children:[{path:"one",component:One},]} (* 注意二级路由路径中不加 / 符) ③在一级页面中设置 < router-link to="二级路由路径">，再设置 < router-view > 标签显示二级路由页面
三十四、router-link 激活的 2 个类型的区别（url 上的 hash 值包含 a 标签 href，就添加模糊匹配的类名，若 url 上的 hash 和导航的 a 标签完全匹配就添加精确匹配的类名）
三十五、路由守卫：（main.js 中，在生成路由对象之后）router.beforeEach ((to,from,next)=>{ 判断和处理 }) 【其中 to 表示要去到的 url，from 表示从哪里跳转的，next () 调用才能让路由正常的跳转切换，next (false) 在原地停留，next (‘强制修改到另一个路由路径上’)，如果不调用 next, 则页面留在原地 】
三十六、Vant 组件库【Vant 是一个轻量、可靠的移动端 Vue 组件库，开箱即用】 （注意 vue 版本号和 vant 版本号的兼容性问题）
三十七、支持组件自定义，在组件使用时传值，子组件中使用 props 接受 ，:style=“{使用绑定的值和属性}”
三十八、将 axios 挂载到 vue 原型上，方便全局使用

【总结】

}

# **** 分析总结：

一、** 动态组件和 vue-router
动态组件可以根据具体的条件和状态来灵活地切换和加载组件，这种切换是在同一个组件内部进行的，不涉及 URL 的变化和页面的跳转。可以用于组件复用，条件渲染，动态加载和替换部分组件（轻量灵活，不需要路由跳转和重新渲染，组件复用减少代码重复）
二、编程式导航和路由式导航
①声明式导航（路由式导航）：

声明式导航是通过在模板中使用指令（如 <router-link>）或组件（如 <router-view>）来定义和触发路由跳转的方式。

它基于 Vue Router 提供的组件和指令，使得在模板中进行页面导航更加简洁和直观。

②声明式导航适用于那些在模板中静态定义的导航链接，例如菜单、导航栏等。通过声明式导航，你可以直接在模板中定义导航链接，点击链接时自动触发路由跳转。
编程式导航：

编程式导航是通过在代码中以编程方式触发路由跳转的方式。

它使用路由实例的方法来进行导航，例如使用 router.push 方法进行页面跳转。

编程式导航适用于那些需要根据特定条件或用户操作来触发页面跳转的场景。通过编程式导航，你可以在任何地方、任何时候根据需要进行页面的跳转。

}
* 注意
/css 中禁止双击选中文本 */
.element {
user-select: none;
}

原始类型的值不能直接取反，（true&&false）, 可以使用 Obj.true 进行取反
当父亲组件给子组件传值，需要通过对象的项目引用的关系来影响对象里面的值时，需要使用 props 的对象方法，而不能用数组方法
element-ui 适用于 vue2 项目，vue3 项目需要使用 element-plus
v-bind:“ ” ，里面是属性时直接写，里面不是属性时要加括号
v-for 遍历对象时，加上 key 属性，有 id 绑定 id，没有 id 绑定 index
过滤器使用场景：①在插值语法中使用②在 v-bind 中 value | 过滤器 1 | 过滤器 2
过滤器使用于差值表达式和动态绑定中：管道符前面是过滤器的第一个・参数，过滤器的第二个参数写在其 () 里面
计算属性：相比于函数带有缓存，减少了函数的执行
侦听器：①侦听值：watch:{变量名（newVal,oldVal）{改变时发生的事件}}
②侦听对象：watch:{"侦听的名称"：{immediate:true,deep:true,handler (newVal,oldVal){侦听值改变时的操作} }}
ajax ：异步请求后端的技术，基于原生 ajax+Promise 技术封装通用于前后端的请求库（原理是 XMLHttpRequest）
@是 vue 中 src 的绝对路径（webpack）,# 是当前页面的路径
props 类型校验：props:{name:String,color:{type:String,required:true,default:red}} 其中有自定义校验规则 (验证器 validator)：validator (value){校验函数体}
v-model 绑定 input 值时，只能使用简易的没有歧义的 js 语法，若要使用较难的 js 语法需要使用 watch 进行监听（监听对象时，需要用深度监听）
计算属性的 get 方法在访问这个计算属性时触发，当模板首次渲染，或者当计算属性所依赖的响应式数据发生变化时重新触发
arr.reduce ((sum,obj)=>{函数体},0) 返回累加和 sum，sum 的初始值为 0（自定义）

# 代码部分

------------------------------------------------------------------------------------------------------------------------------【*】路由导航中代码：(main.js)

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 引入
import VueRouter from 'vue-router'
import First from '@/views/First'
import Second from '@/views/Second'
import Third from '@/views/Third'
import NotFound from '@/views/NotFound'
import ViewsOne from '@/views/Second/ViewsOne'
import ViewsTwo from '@/views/Second/ViewsTwo'
import ViewsThree from '@/views/Second/ViewsThree'

// 注册全局组件
Vue.use(VueRouter)
// 规则数组
const routes = [
// 匹配默认hash值路径,重定向到页面，检测网页打开的默认路由
{
path: '/',
redirect: "/second",
},
{
path: '/first',
component: First,
name: "First",

``meta:{title:" 首页 "} //meta 元字符，用于传值，路由组件可以通过 this.$route.mata. 属性名 拿到`

},
{
path: '/second',
component: Second,
name: 'Second',
// 给页面配置二级路由
children: [
{
path: "viewsone",
component: ViewsOne
},
{
path: "viewstwo",
component: ViewsTwo
},
{
path: "viewsthree",
component: ViewsThree
},
]
},
{
path: '/third',
component: Third,
name: "Third"
},
// 绑定值给视图
{
path: '/first/:name',
component: First,
name: 'First'
},
{
path: '/second/:name',
component: Second,
name: "Second",
}, {
path: '/third/:name',
component: Third,
name: "Third"
},
// 404一定在配置在规则数组最后
{
path: "*",
component: NotFound
, name: "NotFound"
}

]
// 生成路由对象
const router = new VueRouter({
// routes是固定的key，传入规则数组
routes,
// 默认不写是hash值
mode: "history"
})
// 路由守卫，根据路由做出判断
const isLogin = false
router.beforeEach((to, from, next) => {
if (to.path === '/first' && isLogin === false) {
alert('请登录')
next(false) //阻止路由跳转
} else {
next() //正常放行
}
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')

# Vue 项目工具

# 1、vant 组件库（移动端 vue 组件库）

一、下载安装（根据 vue 版本）、引入 (import) 和全局注册 (Vue.use)（main.js 中）、直接使用 Vant 组件名
二、按需引入：安装（ yarn add @vant/auto-import-resolver unplugin-vue-components -D ）、配置、使用、引入

# 2、element-ui（PC 端 vue 组件库）
# 3、postcss （vue 项目插件，配合 webpack 翻译 css 代码）

postcss-pxtorem （ 配合 webpack , 自动将 px 转成 rem ）

一、下载 postcss 和 postcss-pxtorem

yarn add postcss postcss-pxtorem

` 二、文件夹 src 下新建 postcss.config.js

module.exports = {

plugins:{

'postcss-pxtorem':{

//能够将所有元素的px单位转成rem

//rootValue：转换px的基准值。

//例如一个元素宽是75px，转换成rem之后就是2rem 。

rootValue:37.5 ,

propList:['*']

}}}

# Vuex 介绍

npm  install vuex --save
import  Vuex from  'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({ state:{count:0} }) 
new Vue({ el:'#app', render:h => h(app) , router , store })

# Vuex 基础

一、Vuex 的介绍（创建 store 仓库，项目中大范围进行数据共享）
1、简介：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension (opens new window)，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

Vuex 就是用来存放全局变量的，供所有组件使用

2、通俗理解
Vuex 相当于一个仓库，仓库中可以存全局变量，方法。一个项目一个仓库，Vuex 充当项目的存储模块

# Vuex 的模块

# （store 中：state、mutations（commit）、actions（dispatch）、getters（getters）、Module（ this.$store.commit（’子模块名 / 键名‘））

三大模块中 辅助函数 使用时导入：（使用辅助函数形式时，传参需要在事件发生处传值） 子组件中：

import { mapState ,mapMutations,mapActions} from 'vuex'  // 导入辅助函数
computed:{
    ...mapState(['键值'])       // 计算属性中使用 state 中的值
    // 直接使用
}
methods：{
    ...mapMutations(['函数1'，'函数2'])       //methods 中使用 Mutations 中的函数
    ...mapActions(['函数1'，'函数2'])        //methods 中使用 Actions 中的异步函数
    // 直接使用
}

（模块中定义函数时，第一个参数为 state，方便拿到其中的数据，通过 state. 数据名）

# 【1】 state 数据

【】 共享状态数据，存数据

（1）定义 （在 main.js 中 Vuex.Store 中：）

（2）组件获得数据的方式：

①组件通过 $store. 键名 获得数据

②从 vuex 中按需导入 mapState 函数，将全局数据，映射为当前组件的计算属性（子组件中）

import  { mapState }  from  'vuex'
computed:{ ...mapState(['键名'])  }
# 【2】 mutaitions 修改（函数）

【】 修改 state 必须通过 mutations，但其只能执行同步代码，改数据

（1）定义函数，传参 state，通过 state. 名得到 state 中的数据进行修改 （在 main.js 中 Vuex.Store 中：）

（2）组件在组件函数中，通过如下，调用 state 中的函数并传参

this.$store.commit（'函数名'，形参）
//main.js 中：
mutations:{函数名：}

（3） ...mapMutations(['函数名',’函数名2‘]) 辅助函数 （*** 需要导入），组件函数中使用，子组件函数名与 mutations 中函数名保持一致，

传参在事件发生处（@click='fn (参数)'）

子组件中import  { mapMutations ..等 }  from  'vuex'
methods中：{...mapMutations(['键名1，键名2']) ,
 函数()里通过  this.键名() 调用
# 【3】 actions 异步

【】执行异步操作，数据提交给 mutations 进行修改，从后端获取数据，更新到 state 中的 count 中（main.js 中）

【】注意在 action 中，不能直接修改 state 中的数据，必须通过 context.commit（）函数触发某个 mutation 才行（main.js 中）

（1）在 actions 中定义函数并传参 （在 main.js 中 Vuex.Store 中：）

（2）actions 方法参数：

① context ，相当于组件中的 this.$store，即获得 store 中的值

②形参，用于传值

（3）组件中调用 actions（传参时，在定义 actions 函数时要接收）

①原始形式调用： this.$store.dispatch("函数名"，形参)

②辅助函数形式调用（*** 需要导入）：

子组件中导入，methods 方法中使用：

...mapActions(['函数名','函数名2']，)
// 子组件函数中调用（如下）  或者直接在子组件触发事件上使用函数 @click="函数名 (形参)"
子组件函数(){
this.函数名（形参）
this.函数名2(形参)  }
# 【4】 getters 计算（包装数据）

【】从 state 中派生出一些状态，这些状态是依赖 state 的（相当于计算属性，二次处理数据），此时会用到 getters

（1）定义 getters，并传参（在 main.js 中 Vuex.Store 中：）

（2）组件中调用 getters

①原始形式调用： this.$store.getters.函数名 ，接着直接在页面使用：

②辅助函数调用：（*** 需要引入）: ...mapGetters ([' 函数名 '，’函数名 2‘]) 导入到 computed 计算属性中，页面中 使用

# 【5】 Module 模块化

【】所有的数据、更新、操作都在一起，项目越大，越难维护，因此推出 Vuex 模块化（子模块中使用）

（1）定义子模块 Modules （在 main.js 中 Vuex.Store 中：）

modules:{  子模块name1:{state:{ 键：值 }} ， 子模块name2:{state:{ 键：值 }}  }

（2）组件中使用

$store.state.子模块name.子模块键

（3）快捷使用

在 getters 中定义，之后直接使用自定义的名称（①引入 mapGetters，②在 computed 中扩展 ：...mapGetters ([' 自定义名 1'，' 名 2'])）

getters:{  自定义名  : state => state.子模块名.子模块键 ，    }
# 【6】模块化中的 namespaced 命名空间

【】默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的，这样使得多个模块能够对同一 mutation 或者 action 做出响应

（各模块中函数中 state 表示子模块中的 state），此时可以通过 namespaced 命名空间 对模块进行封锁

（1）使用命名空间：

modules:{  子模块名1： namespaced:true   ,state:{....},.....   }

（2）调用数据的方法:

开启命名空间后，组件中读取 state 数据：
①// 方式一：自己直接读取

this.$store.state.personAbout.list

②// 方式二：借助 mapState 读取：

...mapState('countAbout',['sum','school','subject']),

开启命名空间后，组件中读取 getters 数据：
// 方式一：自己直接读取
！[

this.$store.getters['personAbout/firstPersonName']

]()

// 方式二：借助 mapGetters 读取：

...mapGetters('countAbout',['bigSum'])
  1. 开启命名空间后，组件中调用 dispatch
    // 方式一：自己直接 dispatch
this.$store.dispatch('personAbout/addPersonWang',person)

// 方式二：借助 mapActions：

...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'})

开启命名空间后，组件中调用 commit
// 方式一：自己直接 commit

this.$store.commit('personAbout/ADD_PERSON',person)

// 方式二：借助 mapMutations：

...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}),

#

# 使用、配置 Vuex

# (main.js 中配置，组件通过 this.$store 获得)

1、安装：进入项目终端，输入
npm install vuex@3

2、引入

1）终端启动项目

npm run serve
（2）在 mian.js 文件引入 vuex，使用 Vuex

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuex from 'vuex'    // 引入
Vue.config.productionTip = false
Vue.use(Vuex)    // 使用
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
3、创建使用实例
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuex from 'vuex'// 引入
Vue.config.productionTip = false
Vue.use(Vuex)
const store = new Vuex.Store({})    // 创建实例，注意 Vuex.Store 的大小写
new Vue({
  router,
  store,    // 使用
  render: h => h(App)
}).$mount('#app')
4、代码例子
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import Vuex from 'vuex'// 引入
Vue.config.productionTip = false
Vue.use(Vuex)
const store = new Vuex.Store({
  state:{
    count:0,
  },
})
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
去任意页面获取显示 count 数据
<template>
<div class="home">
<h1> 这是 count：</h1>
</div>
</template>
 更新于   阅读次数  次
请我喝[茶]~(￣▽￣)~*
dmq 微信支付
微信支付
dmq 支付宝
支付宝