Vuex
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。
* @author Alan
* @Email no008@foxmail.com
正文
一：Vue 知识要点说明：
1.概念
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信。
Github地址：https://github.com/vuejs/vuex
2.何时使用？
多个组件需要共享数据时
1、多个组件 依赖于同一个状态
2、来自不同组件的行为需要变更统一状态
3.搭建vuex环境
指导内容
3.1: 创建文件：```src/store/index.js```
```js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) //准备actions对象——响应组件中用户的动作 const actions = {} //准备mutations对象——修改state中的数据 const mutations = {} //准备state对象——保存具体的数据 const state = {} //创建并暴露store export default new Vuex.Store({ actions, mutations, state }) ```
3.2: 在```main.js```中创建vm时传入```store```配置项
```js ...... //引入store import store from './store' ...... //创建vm new Vue({ el:'#app', render: h => h(App), store }) ```
4：基本使用
4.1： 初始化数据、配置```actions```、配置```mutations```，操作文件```store.js```
```js //引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //引用Vuex Vue.use(Vuex) const actions = { //响应组件中加的动作 jia(context,value){ // console.log('actions中的jia被调用了',miniStore,value) context.commit('JIA',value) }, } const mutations = { //执行加 JIA(state,value){ // console.log('mutations中的JIA被调用了',state,value) state.sum += value } } //初始化数据 const state = { sum:0 } //创建并暴露store export default new Vuex.Store({ actions, mutations, state, }) ```
4.2： 组件中读取vuex中的数据：
```$store.state.sum```
4.3： 组件中修改vuex中的数据：
```$store.dispatch('action中的方法名',数据)``` 或 ```$store.commit('mutations中的方法名',数据)``` > 备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写```dispatch```，直接编写```commit```
5：getters的使用
5.1： 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工。
5.2. 在```store.js```中追加```getters```配置
```js ...... const getters = { bigSum(state){ return state.sum * 10 } } //创建并暴露store export default new Vuex.Store({ ...... getters }) ```
5.3： 组件中读取数据：
```$store.getters.bigSum```
6：四个map方法的使用：
6.1 ： <strong>mapState方法：</strong>用于帮助我们映射```state```中的数据为计算属性
```js computed: { //借助mapState生成计算属性：sum、school、subject（对象写法） ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性：sum、school、subject（数组写法） ...mapState(['sum','school','subject']), }, ```
6.2： <strong>mapGetters方法：</strong>用于帮助我们映射```getters```中的数据为计算属性
```js computed: { //借助mapGetters生成计算属性：bigSum（对象写法） ...mapGetters({bigSum:'bigSum'}), //借助mapGetters生成计算属性：bigSum（数组写法） ...mapGetters(['bigSum']) }, ```
6.3： <strong>mapActions方法：</strong>用于帮助我们生成与```actions```对话的方法，即：包含```$store.dispatch(xxx)```的函数
```js methods:{ //靠mapActions生成：incrementOdd、incrementWait（对象形式） ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) //靠mapActions生成：incrementOdd、incrementWait（数组形式） ...mapActions(['jiaOdd','jiaWait']) } ```
6.4： <strong>mapMutations方法：</strong>用于帮助我们生成与```mutations```对话的方法，即：包含```$store.commit(xxx)```的函数
```js methods:{ //靠mapActions生成：increment、decrement（对象形式） ...mapMutations({increment:'JIA',decrement:'JIAN'}), //靠mapMutations生成：JIA、JIAN（对象形式） ...mapMutations(['JIA','JIAN']), } ``` > 备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。
7：模块化+命名空间
7.1： 目的：让代码更好维护，让多种数据分类更加明确。
7.2： 修改```store.js```
```javascript const countAbout = { namespaced:true,//开启命名空间 state:{x:1}, mutations: { ... }, actions: { ... }, getters: { bigSum(state){ return state.sum * 10 } } } const personAbout = { namespaced:true,//开启命名空间 state:{ ... }, mutations: { ... }, actions: { ... } } const store = new Vuex.Store({ modules: { countAbout, personAbout } }) ```
7.3： 开启命名空间后，组件中读取state数据：
```js //方式一：自己直接读取 this.$store.state.personAbout.list //方式二：借助mapState读取： ...mapState('countAbout',['sum','school','subject']), ```
7.4：开启命名空间后，组件中读取getters数据：
```js //方式一：自己直接读取 this.$store.getters['personAbout/firstPersonName'] //方式二：借助mapGetters读取： ...mapGetters('countAbout',['bigSum']) ```
7.5： 开启命名空间后，组件中调用dispatch
```js //方式一：自己直接dispatch this.$store.dispatch('personAbout/addPersonWang',person) //方式二：借助mapActions： ...mapActions('countAbout',{incrementOdd:'jiaOdd',incrementWait:'jiaWait'}) ```
7.6： 开启命名空间后，组件中调用commit
```js //方式一：自己直接commit this.$store.commit('personAbout/ADD_PERSON',person) //方式二：借助mapMutations： ...mapMutations('countAbout',{increment:'JIA',decrement:'JIAN'}), ```
二、多组件共享数据--全局事件总线实现
1、组件共享数据--全局事件总线实现
2、/C/D 组件读取A组件数据
3、/C/D 组件修改A组件数据
三、多组件共享数据—Vuex 实现
1、组件共享数据-vuex实现
2、/B/C/D 组件修改Vuex组件X数据
四：实例
1：求和案例_纯Vue版本
1：界面效果
2：App.vue
<template> <div > <h1>当前求和为：{{ sum }}</h1> <select v-model.number="number"> <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', /* mixin(混入) */ mixins: [], /* 配置声明子组件 */ components: { }, /* 组件间数据、方法传值接收区 */ props: [ ], /* 数据对象：数据赋值声明 */ data () { return { sum:0,//当前的和 number:1//用户选择的数字 } }, /* 计算属性：计算区 */ computed: { }, /* 检测区 */ watch: { }, /* */ created () { }, /* 挂载区 */ mounted () { }, /* 方法区 */ methods: { increment(){ this.sum +=this.number; }, decrement(){ this.sum -=this.number; }, incrementOdd(){ if(this.sum % 2){ this.sum += this.number; } }, incrementWait(){ setTimeout(() =>{ this.sum +=this.number; },500); }, } } </script>
<style lang="css" scoped> button{ margin-left:30px; } </style>
3.vue.config.js
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ pages:{ index:{ // 入口 entry:'src/main.js', }, }, //配置vue脚手架的代理服务器：开启代理服务器 此处代理服务器默认与 该脚手架启动的模拟的前端服务器 端口相同：8080 // 方式一 /* devServer:{ proxy:'http://localhost:5000/' }, */ // 方式二 devServer:{ proxy:{ // '/api'： 请求前缀 '/api':{ target:'http://localhost:5000/', // 将请求过来的url信息里的 请求前缀 格式化去除掉 pathRewrite:{'^/api':''}, // ws:true, //用于支持 websocket // chageOrigin:true // 用于控制请求头中的host值 } , // '/api'： 请求前缀 '/demo':{ target:'http://localhost:5001/', // 将请求过来的url信息里的 请求前缀 格式化去除掉 pathRewrite:{'^/demo':''}, // ws:true, //用于支持 websocket // chageOrigin:true // 用于控制请求头中的host值 } } }, transpileDependencies: true, lintOnSave:false, /*关闭语法检查*/ })4.main.js
//引入Vue import Vue from 'vue' //引入App import App from './App.vue' // 引入 vue插件： vue-recource import vueResource from 'vue-resource' //关闭Vue生产提示 Vue.config.productionTip=false; // 使用插件 Vue.use(vueResource); // 创建Vm const vm = new Vue( { el:'#app', render: (h) => h(App), //添加全局事件总线对象 beforeCreate(){ Vue.prototype.$bus=this; } });
5.Count.vue
<template> <div > <h1>当前求和为：{{ sum }}</h1> <select v-model.number="number"> <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', /* mixin(混入) */ mixins: [], /* 配置声明子组件 */ components: { }, /* 组件间数据、方法传值接收区 */ props: [ ], /* 数据对象：数据赋值声明 */ data () { return { sum:0,//当前的和 number:1//用户选择的数字 } }, /* 计算属性：计算区 */ computed: { }, /* 检测区 */ watch: { }, /* */ created () { }, /* 挂载区 */ mounted () { }, /* 方法区 */ methods: { increment(){ this.sum +=this.number; }, decrement(){ this.sum -=this.number; }, incrementOdd(){ if(this.sum % 2){ this.sum += this.number; } }, incrementWait(){ setTimeout(() =>{ this.sum +=this.number; },500); }, } } </script>
<style lang="css" scoped> button{ margin-left:30px; } </style>6.代码界面
五：VueX 工作 原理
实现步骤
六：vuex 使用配置步骤
1：安装vuex环境
2：引入Vuex组件，创建state组件：
npm i -g vue@3 注释：@3是版本号，vue2用vuex@3版本,vue3用4版本
3：简单的vuex 求和案例
3.1 main,js
//引入Vue import Vue from 'vue' //引入App import App from './App.vue' // 引入 vue插件： vue-recource import vueResource from 'vue-resource' // 引入 Vuex import Vuex from 'vuex' // 引入 Store 对象 import store from './store/index' //关闭Vue生产提示 Vue.config.productionTip=false; // 使用插件 Vue.use(vueResource); Vue.use(Vuex); // 创建Vm new Vue( { el:'#app', render: (h) => h(App), /* store:store, // 完整编写方式 */ store, //简写方式 //添加全局事件总线对象 beforeCreate(){ Vue.prototype.$bus=this; } });
3.2 vue.comfig.js
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ pages:{ index:{ // 入口 entry:'src/main.js', }, }, //配置vue脚手架的代理服务器：开启代理服务器 此处代理服务器默认与 该脚手架启动的模拟的前端服务器 端口相同：8080 // 方式一 /* devServer:{ proxy:'http://localhost:5000/' }, */ // 方式二 devServer:{ proxy:{ // '/api'： 请求前缀 '/api':{ target:'http://localhost:5000/', // 将请求过来的url信息里的 请求前缀 格式化去除掉 pathRewrite:{'^/api':''}, // ws:true, //用于支持 websocket // chageOrigin:true // 用于控制请求头中的host值 } , // '/api'： 请求前缀 '/demo':{ target:'http://localhost:5001/', // 将请求过来的url信息里的 请求前缀 格式化去除掉 pathRewrite:{'^/demo':''}, // ws:true, //用于支持 websocket // chageOrigin:true // 用于控制请求头中的host值 } } }, transpileDependencies: true, lintOnSave:false, /*关闭语法检查*/ })
3.3 App.vue
<template> <div > <Count /> </div> </template><script> import Count from './components/Count.vue' export default { /* 组件名 */ name: 'App', /* mixin(混入) */ mixins: [], /* 配置声明子组件 */ components: {Count}, /* 组件间数据、方法传值接收区 */ props: [], /* 数据对象：数据赋值声明 */ data() { return { } }, /* 计算属性：计算区 */ computed: {}, /* 检测区 */ watch: {}, /* */ created() { }, /* 挂载区 */ mounted() { console.log('App',this) }, /* 方法区 */ methods: { } } </script><style scoped lang="css"> .container,.foot{ display:flex;/* div 浮动 */ justify-content: space-around; /* 主轴对齐 */ } img{ width:100%; } h4{ text-align:center; } video{ width:100%; } </style>
3.4 index.js
//该文件用于创建Vuex中最为核心的store //引入vue import Vue from "vue"; //引入Vuex组件 import Vuex from 'vuex' Vue.use(Vuex) //准备actions--用于相应组件中的动作 const actions= { /* incrementStoreActions:function(){ } //原写方式：*/ //简写方式：加 incrementOddStoreActions(storeContextMiniFunctions,values){ if(storeContextMiniFunctions.state.sum % 2 ){ storeContextMiniFunctions.commit('incrementStore',values); } }, //简写方式：加 incrementWaitStoreActions(storeContextMiniFunctions,values){ setTimeout(()=>{ storeContextMiniFunctions.commit('incrementStore',values); },500); }, } ; //准备mutations--用于操作数据：state const mutations= { //新增 incrementStore(stateObject,values){ stateObject.sum += values; //赋值 }, //减 decrementStore(stateObject,values){ stateObject.sum -= values; //赋值 }, } ; //准备 state--用于储存数据 const state = { sum:0,//当前的和 } ; //创建 store 并导出 store export default new Vuex.Store({ //简写 actions, mutations, state });
3.5 Count.vue
<template> <div > <h1>当前求和为：{{ $store.state.sum }}</h1> <select v-model.number="number"> <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', /* mixin(混入) */ mixins: [], /* 配置声明子组件 */ components: { }, /* 组件间数据、方法传值接收区 */ props: [ ], /* 数据对象：数据赋值声明 */ data () { return { number:1//用户选择的数字 } }, /* 计算属性：计算区 */ computed: { }, /* 检测区 */ watch: { }, /* */ created () { }, /* 挂载区 */ mounted () { console.log('Count',this) }, /* 方法区 */ methods: { increment(){ this.$store.commit('incrementStore',this.number); }, decrement(){ this.$store.commit('decrementStore',this.number); }, incrementOdd(){ this.$store.dispatch('incrementOddStoreActions',this.number); }, incrementWait(){ this.$store.dispatch('incrementWaitStoreActions',this.number); }, } } </script><style lang="css" scoped> button{ margin-left:30px; } </style>
4：求和案例_getters_mapState_mapGetters
4.1：界面效果图
4.1：main.js
//引入Vue import Vue from 'vue' //引入App import App from './App.vue' // 引入 vue插件： vue-recource import vueResource from 'vue-resource' // 引入 Vuex import Vuex from 'vuex' // 引入 Store 对象 import store from './store/index' //关闭Vue生产提示 Vue.config.productionTip=false; // 使用插件 Vue.use(vueResource); Vue.use(Vuex); // 创建Vm new Vue( { el:'#app', render: (h) => h(App), /* store:store, // 完整编写方式 */ store, //简写方式 //添加全局事件总线对象 beforeCreate(){ Vue.prototype.$bus=this; } });4.3：vue.config.js
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ pages:{ index:{ // 入口 entry:'src/main.js', }, }, //配置vue脚手架的代理服务器：开启代理服务器 此处代理服务器默认与 该脚手架启动的模拟的前端服务器 端口相同：8080 // 方式一 /* devServer:{ proxy:'http://localhost:5000/' }, */ // 方式二 devServer:{ proxy:{ // '/api'： 请求前缀 '/api':{ target:'http://localhost:5000/', // 将请求过来的url信息里的 请求前缀 格式化去除掉 pathRewrite:{'^/api':''}, // ws:true, //用于支持 websocket // chageOrigin:true // 用于控制请求头中的host值 } , // '/api'： 请求前缀 '/demo':{ target:'http://localhost:5001/', // 将请求过来的url信息里的 请求前缀 格式化去除掉 pathRewrite:{'^/demo':''}, // ws:true, //用于支持 websocket // chageOrigin:true // 用于控制请求头中的host值 } } }, transpileDependencies: true, lintOnSave:false, /*关闭语法检查*/ }) module.exports = { devServer: { disableHostCheck: true } }4.4：App.vue
<template> <div > <Count /> </div> </template>
<script> import Count from './components/Count.vue' export default { /* 组件名 */ name: 'App', /* mixin(混入) */ mixins: [], /* 配置声明子组件 */ components: {Count}, /* 组件间数据、方法传值接收区 */ props: [], /* 数据对象：数据赋值声明 */ data() { return { } }, /* 计算属性：计算区 */ computed: {}, /* 检测区 */ watch: {}, /* */ created() { }, /* 挂载区 */ mounted() { console.log('App',this) }, /* 方法区 */ methods: { } } </script><style scoped lang="css"> .container,.foot{ display:flex;/* div 浮动 */ justify-content: space-around; /* 主轴对齐 */ } img{ width:100%; } h4{ text-align:center; } video{ width:100%; } </style>
4.5： Count.vue
<template> <div > <hr/> <select v-model.number="number"> <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> <hr/> <span>插值方式实现</span><!-- 直接计算方式：--> <h1>当前求和为：{{sumFunction }}</h1> <h1>当前求和为：{{sum }}</h1> <h1>当前求和为：{{sumByMapState }}</h1> <hr/> <span>插值方式实现</span><!-- 直接计算方式：--> <h1>当前求和放大10倍为：{{ $store.state.sum*10 }}</h1> <hr/> <span>计算属性实现方式</span><!-- 计算属性实现方式 --> <h1>当前求和放大10倍为：{{tenSum }}</h1> <hr/> <span>Vuex Getters 实现方式</span><!-- Vuex Getters 实现方式 --> <h1>当前求和放大10倍为：{{SumToTenFunction }}</h1> <h1>当前求和放大10倍为：{{SumToTen }}</h1> <h1>当前求和放大10倍为：{{SumToTenByMapGetters }}</h1> <hr/> <span>Vuex Getters 实现方式</span><!-- Vuex Getters 实现方式 --> <h1> {{titileFunction }}课程有：例如--》 {{subTitleFunction }} </h1> <h1> {{Title }}课程有：例如--》 {{subTitle }} </h1> <h1> {{titileByMapState }}课程有：例如--》 {{subTitleByMapState }} </h1> <hr/> </div> </template>
<script> //引入Vuex 的 mapState 对象 import {mapState, mapGetters} from 'vuex'; export default { /* 组件名 */ name: 'Count', /* mixin(混入) */ mixins: [], /* 配置声明子组件 */ components: { }, /* 组件间数据、方法传值接收区 */ props: [ ], /* 数据对象：数据赋值声明 */ data () { return { number:1//用户选择的数字 } }, /* 计算属性：计算区 */ computed: { //调用mapState 方法生成计算属性，从state中读取数据。(对象写法) ...mapState({sumByMapState:'sum',titileByMapState:'Title',subTitleByMapState:'subTitle'}), //调用mapState 方法生成计算属性，从state中读取数据。(数组写法) ...mapState(['sum','Title','subTitle']), //靠程序员自己亲自去写计算属性 tenSum(){ return this.$store.state.sum*10; }, sumFunction(){ return this. $store.state.sum; }, titileFunction(){ return this.$store.state.Title ; }, subTitleFunction(){ return this.$store.state.subTitle; }, /* ************************************************************************************************************************************************************************************************************************************************************** */ SumToTenFunction(){ return this.$store.getters.SumToTen; }, //调用 mapGetters 方法生成计算属性，从getters中读取数据。(对象写法) ...mapGetters({SumToTenByMapGetters:'SumToTen'}), //调用 mapGetmapGetters 方法生成计算属性，从getters中读取数据。(数组写法) ...mapGetters(['SumToTen']), }, /* 检测区 */ watch: { }, /* */ created () { }, /* 挂载区 */ mounted () { console.log('Count',this) const x= mapState({sumByMapState:'sum',titileByMapState:'Title',subTitleByMapState:'subTitle'}); console.log('Count',x) }, /* 方法区 */ methods: { increment(){ this.$store.commit('incrementStore',this.number); }, decrement(){ this.$store.commit('decrementStore',this.number); }, incrementOdd(){ this.$store.dispatch('incrementOddStoreActions',this.number); }, incrementWait(){ this.$store.dispatch('incrementWaitStoreActions',this.number); }, } } </script><style lang="css" scoped> button{ margin-left:30px; } </style>
4.6：index.js
//该文件用于创建Vuex中最为核心的store //引入vue import Vue from "vue"; //引入Vuex组件 import Vuex from 'vuex' Vue.use(Vuex) //准备actions--用于相应组件中的动作 const actions= { /* incrementStoreActions:function(){ } //原写方式：*/ //简写方式：加 incrementOddStoreActions(storeContextMiniFunctions,values){ if(storeContextMiniFunctions.state.sum % 2 ){ storeContextMiniFunctions.commit('incrementStore',values); } }, //简写方式：加 incrementWaitStoreActions(storeContextMiniFunctions,values){ setTimeout(()=>{ storeContextMiniFunctions.commit('incrementStore',values); },500); }, } ; //准备mutations--用于操作数据：state const mutations= { //新增 incrementStore(stateObject,values){ stateObject.sum += values; //赋值 }, //减 decrementStore(stateObject,values){ stateObject.sum -= values; //赋值 }, } ; //准备 state--用于储存数据 const state = { sum:0,//当前的和 Title:"前端学习:", subTitle:"Vuex", } ; //准备getters 用于state中的数据进行加工 const getters={ SumToTen(state){ return state.sum*10; //大十倍数 }, }; //创建 store 并导出 store export default new Vuex.Store({ //简写 actions, mutations, state, getters });
5：求和案例_mapMutations_mapActions
5.1：界面效果图
5.2
5.2：vue.config.js
const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ pages:{ index:{ // 入口 entry:'src/main.js', }, }, //配置vue脚手架的代理服务器：开启代理服务器 此处代理服务器默认与 该脚手架启动的模拟的前端服务器 端口相同：8080 // 方式一 /* devServer:{ proxy:'http://localhost:5000/' }, */ // 方式二 devServer:{ proxy:{ // '/api'： 请求前缀 '/api':{ target:'http://localhost:5000/', // 将请求过来的url信息里的 请求前缀 格式化去除掉 pathRewrite:{'^/api':''}, // ws:true, //用于支持 websocket // chageOrigin:true // 用于控制请求头中的host值 } , // '/api'： 请求前缀 '/demo':{ target:'http://localhost:5001/', // 将请求过来的url信息里的 请求前缀 格式化去除掉 pathRewrite:{'^/demo':''}, // ws:true, //用于支持 websocket // chageOrigin:true // 用于控制请求头中的host值 } } }, transpileDependencies: true, lintOnSave:false, /*关闭语法检查*/ }) module.exports = { devServer: { disableHostCheck: true } }
5.3：main.js
//引入Vue import Vue from 'vue' //引入App import App from './App.vue' // 引入 vue插件： vue-recource import vueResource from 'vue-resource' // 引入 Vuex import Vuex from 'vuex' // 引入 Store 对象 import store from './store/index' //关闭Vue生产提示 Vue.config.productionTip=false; // 使用插件 Vue.use(vueResource); Vue.use(Vuex); // 创建Vm new Vue( { el:'#app', render: (h) => h(App), /* store:store, // 完整编写方式 */ store, //简写方式 //添加全局事件总线对象 beforeCreate(){ Vue.prototype.$bus=this; } });
5.4 App.vue
<template> <div > <Count /> </div> </template><script> import Count from './components/Count.vue' export default { /* 组件名 */ name: 'App', /* mixin(混入) */ mixins: [], /* 配置声明子组件 */ components: {Count}, /* 组件间数据、方法传值接收区 */ props: [], /* 数据对象：数据赋值声明 */ data() { return { } }, /* 计算属性：计算区 */ computed: {}, /* 检测区 */ watch: {}, /* */ created() { }, /* 挂载区 */ mounted() { console.log('App',this) }, /* 方法区 */ methods: { } } </script><style scoped lang="css"> .container,.foot{ display:flex;/* div 浮动 */ justify-content: space-around; /* 主轴对齐 */ } img{ width:100%; } h4{ text-align:center; } video{ width:100%; } </style>
5.5：Count.vue
<template> <div > <hr/> <select v-model.number="number"> <option :value="1">1</option> <option :value="2">2</option> <option :value="3">3</option> </select> <button @click="increment(number)">+</button> <button @click="decrement(number)">-</button> <button @click="incrementOdd(number)">当前求和为奇数再加</button> <button @click="incrementWait(number)">等一等再加</button> <hr/> <span>插值方式实现</span><!-- 直接计算方式：--> <h1>当前求和为：{{sum }}</h1> <h1>当前求和为：{{sumByMapState }}</h1> <hr/> <span>插值方式实现</span><!-- 直接计算方式：--> <h1>当前求和放大10倍为：{{ $store.state.sum*10 }}</h1> <hr/> <span>计算属性实现方式</span><!-- 计算属性实现方式 --> <h1>当前求和放大10倍为：{{tenSum }}</h1> <hr/> <span>Vuex Getters 实现方式</span><!-- Vuex Getters 实现方式 --> <h1>当前求和放大10倍为：{{SumToTen }}</h1> <h1>当前求和放大10倍为：{{SumToTenByMapGetters }}</h1> <hr/> <span>Vuex Getters 实现方式</span><!-- Vuex Getters 实现方式 --> <h1> {{Title }}课程有：例如--》 {{subTitle }} </h1> <h1> {{titileByMapState }}课程有：例如--》 {{subTitleByMapState }} </h1> <hr/> </div> </template><script> //引入Vuex 的 mapState 对象 import {mapState, mapGetters,mapMutations,mapActions} from 'vuex'; export default { /* 组件名 */ name: 'Count', /* mixin(混入) */ mixins: [], /* 配置声明子组件 */ components: { }, /* 组件间数据、方法传值接收区 */ props: [ ], /* 数据对象：数据赋值声明 */ data () { return { number:1//用户选择的数字 } }, /* 计算属性：计算区 */ computed: { //调用mapState 方法生成计算属性，从state中读取数据。(对象写法) ...mapState({sumByMapState:'sum',titileByMapState:'Title',subTitleByMapState:'subTitle'}), //调用mapState 方法生成计算属性，从state中读取数据。(数组写法) ...mapState(['sum','Title','subTitle']), //靠程序员自己亲自去写计算属性 tenSum(){ return this.$store.state.sum*10; }, /* ************************************************************************************************************************************************************************************************************************************************************** */ //调用 mapGetters 方法生成计算属性，从getters中读取数据。(对象写法) ...mapGetters({SumToTenByMapGetters:'SumToTen'}), //调用 mapGetmapGetters 方法生成计算属性，从getters中读取数据。(数组写法) ...mapGetters(['SumToTen']), }, /* 检测区 */ watch: { }, /* */ created () { }, /* 挂载区 */ mounted () { console.log('Count',this) }, /* 方法区 */ methods: { //借助 mapMutations 生成对应的方法，方法中会调用commit 去联系mutations(对象写法) ...mapMutations({increment:'incrementStore',decrement:'decrementStore'}), /* //靠程序员自己亲自去写计算属性 increment(){ this.$store.commit('incrementStore',this.number); }, decrement(){ this.$store.commit('decrementStore',this.number); }, */ /* ********************************************************************** */ //借助 mapActions 生成对应的方法，方法中会调用commit 去联系 mapActions(对象写法) ...mapActions({incrementOdd:'incrementOddStoreActions',incrementWait:'incrementWaitStoreActions'}), /* //靠程序员自己亲自去写计算属性 incrementOdd(){ this.$store.dispatch('incrementOddStoreActions',this.number); }, incrementWait(){ this.$store.dispatch('incrementWaitStoreActions',this.number); }, */ } } </script><style lang="css" scoped> button{ margin-left:30px; } </style>
5.6：index.js
//该文件用于创建Vuex中最为核心的store //引入vue import Vue from "vue"; //引入Vuex组件 import Vuex from 'vuex' Vue.use(Vuex) //准备actions--用于相应组件中的动作 const actions= { /* incrementStoreActions:function(){ } //原写方式：*/ //简写方式：加 incrementOddStoreActions(storeContextMiniFunctions,values){ if(storeContextMiniFunctions.state.sum % 2 ){ storeContextMiniFunctions.commit('incrementStore',values); } }, //简写方式：加 incrementWaitStoreActions(storeContextMiniFunctions,values){ setTimeout(()=>{ storeContextMiniFunctions.commit('incrementStore',values); },500); }, } ; //准备mutations--用于操作数据：state const mutations= { //新增 incrementStore(stateObject,values){ stateObject.sum += values; //赋值 }, //减 decrementStore(stateObject,values){ stateObject.sum -= values; //赋值 }, } ; //准备 state--用于储存数据 const state = { sum:0,//当前的和 Title:"前端学习:", subTitle:"Vuex", } ; //准备getters 用于state中的数据进行加工 const getters={ SumToTen(state){ return state.sum*10; //大十倍数 }, }; //创建 store 并导出 store export default new Vuex.Store({ //简写 actions, mutations, state, getters });
学问：纸上得来终觉浅，绝知此事要躬行
为事：工欲善其事，必先利其器。
态度：道阻且长，行则将至；行而不辍，未来可期
.....................................................................
------- 桃之夭夭，灼灼其华。之子于归，宜其室家。 ---------------
------- 桃之夭夭，有蕡其实。之子于归，宜其家室。 ---------------
------- 桃之夭夭，其叶蓁蓁。之子于归，宜其家人。 ---------------
=====================================================================
* 博客文章部分截图及内容来自于学习的书本及相应培训课程以及网络其他博客，仅做学习讨论之用，不做商业用途。
* 如有侵权，马上联系我，我立马删除对应链接。 * @author Alan -liu * @Email no008@foxmail.com
转载请标注出处！ ✧*꧁一品堂.技术学习笔记꧂*✧. ---> https://www.cnblogs.com/ios9/
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· DeepSeek 开源周回顾「GitHub 热点速览」
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？