Vue(4)脚手架Vuex

文章目录

脚手架
- 前言
- render函数（关于不同版本的Vue）
- 修改默认配置
- ref属性
- props配置
- mixin混入
- 插件
- scoped
- lang
- 总结TodoList案例
- 浏览器的本地存储
Vuex
- 简介
- - 1.概念
  - 2.使用Vuex
- 搭建环境
- Vuex案例
- - 基本使用
- getters配置项
- vuex 与 vue 的类比
- 四个map方法的使用
- 范例
- 模块化 namespace

脚手架

前言

在这里插入图片描述

render函数（关于不同版本的Vue）

main.js

// 引入Vue
import Vue from "vue";
// 引入App组件，它是所有组件的父组件
import App from "./App.vue";
// 关闭Vue的生产提示
Vue.config.productionTip = false;// new Vue({
//   render: h => h(App),
// }).$mount('#app')// 创建Vue实例对象
new Vue({el: "#app",// 将app放入容器render: (h) => h(App),// template: `<h1>你好</h1>` 用不了,//components:{APP}
});

关于不同版本的Vue
1.vue.js与vue.runtime.xxx.js的区别：
（1）vue.js 是完整版的Vue 包含：核心功能+模版解析器
（2）vue.runtime.xxx.js 是运行版的Vue 只包含：核心功能：没有模版解析器
2.因为vue.runtime.xxx.js 没有模版解析器，所以不能使用template配置项需要使用render函数接收到的createElement函数（在页面创建元素）去指定具体内容

修改默认配置

Vue 脚手架隐藏了所有webpack相关配置
若想查看具体（不能改）的webpack配置，执行 vue inspect >output.js
使用vue.config.js可以对脚手架进行个性化定制，详情见：配置

ref属性

1.被用来给元素或子组件注册引用信息（id的替代者）
2.应用在html标签上获取的是真实的DOM元素，应用在组件标签上的是组件的实例对象（vc）
3.使用方式：
打标识：<h1 ref="xxx">.....</h1>

或 <School ref="xxx"></School>
获取：this.$refs.xxx

注意：有点类似于document.getElementById,但是在组建标签上写id时，getElementById获取的是整个组件的DOM元素，并不是组件实例对象

<template><div><h1 v-text="msg" ref="title"></h1><button @click="showDOM">点我输出上方的DOM</button><School ref="sch" id="sch" /></div>
</template>
<script>// 引入School组件import School from "./components/School";export default {name: "App",data() {return {msg: "hello",};},components: {School,},methods: {showDOM() {console.log(this.$refs.title); //真实DOM元素console.log(document.getElementById("sch")); //真实DOM元素;console.log(this.$refs.sch); //该组件的实例对象},},};
</script>
<style></style>

props配置

功能：让组件接收外部传过来的数据
（1）传递数据
在这里插入图片描述

（2）接收数据
在这里插入图片描述

备注:props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告
但这个检测是浅层次的，如果修改了某个对象中的值，vue检测不到，就不会报错
若业务需求确实需要修改那么复制props中的内容到data一份，然后去修改data中的数据

在这里插入图片描述

mixin混入

功能：可以把多个文件共用的配置提取成一个混入对象

使用方式：
第一步：定义混合
在这里插入图片描述
第二步：使用混入，例如：
（1）全局混入：Vue.mixin(xxx)

(2) 局部混入 : mixins:[‘xxx’]

注意：如果data中的数据，methods的方法名和mixin中的数据或方法名相同，优先使用data methods
如果是生命周期钩子重名，两个方法同级，都会调用，并不存在优先使用谁

插件

功能：用于增强Vue
本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据
定义插件：
对象.install=function( Vue,options){…}
使用插件：Vue.use(plugins，1,2,3);
plugins.js

export default {install(Vue) {// 全局过滤器Vue.filter("mySlice", function (value) {return value.slice(0, 4);});// 定义全局指令Vue.directive("fbind", {// 指令与元素成功绑定时（一上来）bind(el, binding) {el.value = binding.value;},// 指令所在元素被插入页面时inserted(el, binding) {el.focus();},// 指令所在模版被重新解析时update(el, binding) {el.value = binding.value;el.focus();},});// 定义混入Vue.mixin({data() {return {x: 100,y: 200,};},});//给Vue原型上添加一个方法(vm,vc都能用)Vue.prototype.hello = () => {alert("你好啊");};},
};

scoped

作用：让样式在局部生效，防止冲突
写法：在这里插入图片描述

lang

在这里插入图片描述

总结TodoList案例

1.组件化编码流程：
（1）拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突
（2）实现动态组件: 考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用
一个组件在用：放在组件自身即可
一些组件在用，放在他们共同的组件上（状态提升）
（3）实现交互：从绑定事件开始
2.props适用于
（1）父组件==>子组件通信
（2）子组件==> 父组件通信（要求父先给子一个函数）
3.使用v-model时要切记：v-model绑定的值不能是props传过来的值
因为props是不可以修改的
4.props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做

浏览器的本地存储

1.存储内容一般支持5MB左右（不同浏览器可能还不一样）
2.浏览器端通过WIndow.sessionStorage和Window.localStorage属性来实现本地存储
3.相关API
1.xxxxxStorage.setItem(‘key’,‘value’);
该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值
2.xxxxxStorage.getItem(‘key’,‘value’);
该方法接收一个键名作为参数，返回键名对应的值
3.xxxxxStorage.removeItem(‘key’);
该方法接收一个键名作为参数，并把该简明从存储中删除
4.xxxxxStorage.clear();
该方法会清空存储中的所有数据
4.备注：
1.sessionStorage 存储的内容会随着浏览器窗口关闭而消失
2.localStorage 存储的内容，需要手动清除才会消失（调用API，手动清除浏览器缓存）
3.xxxxxStorage.getItem(xxx) 如果xxx对应的value值获取不到，那么getItem的返回值是null
4.JSON.parse(null) 的结果依然是null

Vuex

简介

1.概念

专门在Vue中实现集中式状态（数据）管理的一个Vue插件
对Vue应用中多个组件的共享状态进行集中式的管理（读/写）
也是一种组件间通信的方式，且适用于任意组件间通信

2.使用Vuex

1.多个组件依赖于同一状态
2.来自不同组件的行为需要变更同一状态
vuex原理图
在这里插入图片描述

这三个配置都是由store管理的
之所以这样是因为dispatch是由store提供的

1.在组件中点击加的按钮之后，要说做什么动作就要调用dispatch 参1：动作类型参2：加几
2.调用dispatch之后加的动作和值来到Actions
3.Actions本质上是个Object类型的对象在这里可以对传过来的数据进行一定操作比如判断等
Actions里面一定有一个key和dispatch中的 'jia’去对应，只要对应就会引起函数的调用，一旦被调用就会收到那个 2
4.在Actions中jia所对应的函数里自己调用commit
5.然后走到Mutations里面（本质上是个Object类型的对象），这里面也会有一个jia：function
6.这个函数会有两个东西整个State，还有传过来的值
7.这样写之后底层会自动调用Mutate
8.Vuex重新解析模版更新页面

Actions有时候并不必要写，可直接调用commit
什么时候用Actions？
需要处理数据
当进行动作这个动作的值需要发送ajax请求

搭建环境

npm i vuex@3
//Vue2只能用Vuex的3版本
//Vue3只能用Vuex的4版本

1.创建文件：src/store/index.js

// 该文件用于创建vuex中最为核心的store
// 引入Vue
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 应用插件
Vue.use(Vuex);
// 准备actions - 用于响应组件中的动作
const actions = {};
// 准备mutations - 用于操作数据（state）
const mutations = {};
// 准备state - 用于存储数据
const state = {};
// 创建并导出store
export default new Vuex.Store({actions,mutations,state,
});

在store.js引入Vuex并使用该插件（Vue.use(Vuex)）的原因是 store必须在使用插件之后才能创建（即new Vuex.Store）

但是也不能如下图所示调换位置
在这里插入图片描述

因为es6中会将import语句声明提前
因此唯一的解决方式是将插件使用在声明store的文件中使用

2.在main.js中创建vm时传入store配置项

**加粗样式**

Vuex案例

基本使用

1.初始化数据：配置actions 配置mutations 操作文件store.js
index.js

在 state 中准备用于存储的数据 sum。在 mutations 中准备用于修改 state 中数据的函数 JIA 和
JIAN。（注意配置在 mutations 中的函数名一般大写）。在 actions 中准备用于响应组件的函数 jiaOdd 和
jiaWait。

src/index.js

// 该文件用于创建vuex中最为核心的store
// 引入Vue
import Vue from "vue";
// 引入Vuex
import Vuex from "vuex";
// 应用插件
Vue.use(Vuex);
// 准备actions - 用于响应组件中的动作
const actions = {// 前两个可以注释掉，因为并没有做任何判断，可以直接在methods里commit// jia(context, value) {//   context.commit("JIA", value);// },// jian(context, value) {//   context.commit("JIAN", value);// },jiaOdd(context, value) {if (context.state.sum % 2) {context.commit("JIA", value);}},jiaWait(context, value) {setTimeout(() => {context.commit("JIA", value);}, 500);},
};
// 准备mutations - 用于操作数据（state）
const mutations = {JIA(state, value) {state.sum += value;},JIAN(state, value) {state.sum -= value;},
};
// 准备state - 用于存储数据
const state = {sum: 0,
};
// 创建并导出store
export default new Vuex.Store({actions,mutations,state,
});

Count.vue

在 Count.vue 的 methods 中配置方法。简单的逻辑，直接在 methods 中
this. $s t ore . co mmi t (^{'} 方法^{'}, 数据) 。（此处的方法为 in d e x . j s 中 m u t a t i o n s 中配置的方法）复杂的逻辑，通过在 m e t h o d s 中 t hi s .$ store.dispatch(‘方法’, 数据)。（此处的方法为 index.js 中
actions 中配置的方法）页面呈现时的模板语法：{{$store.state.sum}}

components/Count.vue

<template><div><h1>当前求和为:{{ $store.state.sum }}</h1><select v-model.number="n"><option value="1">1</option><option value="2">2</option><option value="3">3</option></select><button @click="increment">+</button><button @click="decrement">-</button><button @click="incrementOdd">当前求和为奇数再加</button><button @click="incrementWait">等一等再加</button></div>
</template><script>
export default {name: "Count",data() {return {n: 1,};},methods: {increment() {this.$store.commit("JIA", this.n);},decrement() {this.$store.commit("JIAN", this.n);},incrementOdd() {this.$store.dispatch("jiaOdd", this.n);},incrementWait() {this.$store.dispatch("jiaWait", this.n);},},mounted() {console.log("Count", this);},
};
</script><style lang="scss" scoped>
button {margin: left;
}
</style>

2.组件中读取vuex数据：$store.state.sum
3.组件中修改vuex数据: $s t ore . d i s p a t c h (^{'} a c t i o n s 中的方法名^{'} ，数据) 或$ store.commit( ’multations中的方法名‘，数据)、

备注：若没有网络请求或其他业务逻辑，组件中也
可以越过actions，即不写dispatch 直接编写commit

getters配置项

1.概念：当state中的数据需要经过加工后再使用时，可以使用getters加工（逻辑较为复杂时使用，可被多组件复用）
2.在store/index.js中追加getters配置

在这里插入图片描述
3.组件中读取数据: $store.getters.bigSum

vuex 与 vue 的类比

vuex 中的 state 相当于 vue 中的 data。
vuex 中的 mutations 相当于 vue 中的 methods。
vuex 中的 getters 相当于 vue 中的 computed。
vuex 中的 actions 相当于 vue 中的 methods
注意：同步方法写在 mutations，异步写在 actions 里。

四个map方法的使用

1.mapState 用于帮助我们映射State中的数据作为计算属性
在这里插入图片描述
对象写法的key名对应计算属性的属性名，value值对应state中的变量名
2.mapGetters 用于帮助我们映射getters中的数据作为计算属性

在这里插入图片描述
3.mapActions 用于帮助我们生成与Actions对话的方法即包含$store.dispatch（xxx）的函数

4.mapMutations 用于帮助我们生成与Mutations对话的方法即包含$store.commit(xxx)的函数

在这里插入图片描述
备注：mapActions与mapMutations使用时，若需要传递参数，需要在模版中绑定事件时传递好参数，否则参数是事件对象

范例

使用mapState 和mapGetters

	// 该文件用于创建Vuex中最为核心的store// 引入vue核心库import Vue from 'vue'// 引入Vueximport Vuex from 'vuex'// 应用Vuex插件Vue.use(Vuex)// 准备actions——用于响应组件中的动作const actions = {jiaOdd(context, value){console.log('actions中的addOdd被调用了');if(context.state.sum % 2){context.commit('JIA',value)}},jiaWait(context, value){console.log('actions中的addWait被调用了');setTimeout(()=>{context.commit('JIA', value)},500)}}// 准备mutations——用于修改state中的数据（state）const mutations = {JIA(state, value){console.log('mutations中的JIA被调用了',state, value);state.sum += value},JIAN(state, value){console.log('mutations中的JIAN被调用了',state, value);state.sum -= value}}// 准备state——用于存储具体的数据const state = {sum: 0, //当前的和school: '尚硅谷',subject: '前端'} // 准备getters——用于将state中的数据进行加工const getters = {bigSum(state){return state.sum * 10}}// 创建并暴露storeexport default new Vuex({actions,mutations,state,getters})

Count.vue

要在该组件导入 mapState 和 mapGetters
import { mapState, mapGetters } from “vuex”;

	<template><div><h2>当前求和为：{{ sum }}</h2><h3>当前求和放大10倍：{{ bigSum }}</h3><h3>我在{{ school }}，学习{{ subject }}</h3><select v-model.number="n"><option :value="1">1</option><option :value="2">2</option><option :value="3">3</option></select><button @click="add(n)">+</button><button @click="sub(n)">-</button><button @click="addOdd(n)">当前求和为奇数再加</button><button @click="addWait(n)">等一等再加</button></div></template><script>import { mapState, mapGetters } from "vuex";export default {name: "myCount",data() {return {n: 1, //用户选择的数字};},computed: {// 借助mapState生成计算属性，从state中读取数据 （对象写法）//...mapState({ sum: "sum", school: "school", subject: "subject" }),// 借助mapState生成计算属性，从state中读取数据 （数组写法）...mapState(['sum','school','subject']),// 借助mapGetters生成计算属性，从getters中读取数据（对象写法）//...mapGetters({bigSum: 'bigSum'}),// 借助mapGetters生成计算属性，从getters中读取数据（数组写法）...mapGetters(['bigSum'])},methods: {increment() {this.$store.commit("JIA", this.n);},decrement() {this.$store.cmommit("JIAN", this.n);},incrementOdd() {this.$store.dispatch("jiaOdd", this.n);},incrementWait() {this.$store.dispatch("jiaWait", this.n);},},};</script><style scoped>button {margin-left: 5px;}</style>

如果不使用 mapState 和 mapGetters，则需要在 computed 中手动配置如下代码。

computed: {sum() {return this.$store.state.sum;},school() {return this.$store.state.school;},subject() {return this.$store.state.subject;},bigSum() {return this.$store.getters.bigSum;}}

使用mapActions和mapMutations

index文件不变 Count.vue 要在该组件导入 mapActions 和 mapMutations import {
mapActions, mapMutations} from “vuex”;

	<template><div><h2>当前求和为：{{ sum }}</h2><h3>当前求和放大10倍：{{ bigSum }}</h3><h3>我在{{ school }}，学习{{ subject }}</h3><select v-model.number="n"><option :value="1">1</option><option :value="2">2</option><option :value="3">3</option></select><button @click="add(n)">+</button><button @click="sub(n)">-</button><button @click="addOdd(n)">当前求和为奇数再加</button><button @click="addWait(n)">等一等再加</button></div></template><script>import { mapState, mapGetters, mapMutations, mapActions } from "vuex";export default {name: "myCount",data() {return {n: 1, //用户选择的数字};},computed: {// 借助mapState生成计算属性，从state中读取数据 （对象写法）// ...mapState({ sum: "sum", school: "school", subject: "subject" }),// 借助mapState生成计算属性，从state中读取数据 （数组写法）...mapState(["sum", "school", "subject"]),// 借助mapGetters生成计算属性，从getters中读取数据（对象写法）//...mapGetters({bigSum: 'bigSum'}),// 借助mapGetters生成计算属性，从getters中读取数据（数组写法）...mapGetters(["bigSum"]),},methods: {//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations (对象的写法)...mapMutations({add: 'ADD', sub: 'SUB'}),//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations (数组的写法)//...mapMutations(['ADD','SUB']), //此时上面的绑定也要 @ADD @SUB//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions (对象写法)...mapActions({addOdd: 'addOdd', addWait: 'addWait'})//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions (数组写法)//...mapActions(['addOdd','addWait'])},};</script><style scoped>button {margin-left: 5px;}</style>