vue从入门到放弃（六）
2024-04-23 07:41:28
今日学习内容：
1.vuex的介绍
2.vuex的结构和组成
3.vuex的安装命令
4.vuex的state、getters、mutations、actions的使用
5.modules模块化和命名空间的使用
vuex的介绍
- **VueX 是一个专门为 Vue.js 应用设计的状态管理架构，统一管理和维护各个vue组件的可变化状态(你能够理解成 vue 组件里的某些 data )。**大白话：集中管理数据的模块
- 它采用集中式存储管理应用的全部组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
- Vuex有五个核心概念，state, getters, mutations, actions, modules。
- 状态管理: 简单理解就是统一管理和维护各个vue组件的可变化状态(你能够理解成vue组件里的某些data)
vuex的结构和组成
vuex安装命令
(base) goldwater@hujinshui vue3.0-demo % cnpm i -S vuex
vuex的state、getters、mutations、actions的使用
vuexTestDemo.vue
<template><div><h1>modules 开启命名空间state的使用</h1><p>namespaced为true后，获取modules中的state方式二</p><p>{{this.$store.state.goods.goods}}</p><p>namespaced为true后，获取modules中的state方式三</p><p>{{getGoods}}</p><p>namespaced为true后，获取modules中的state方式四</p><p>{{goods}}</p><h1>modules 开启命名空间getters的使用</h1><p>namespaced为true后，获取modules中的getters方式一</p><p>{{this.$store.getters['goods/getGoods']}}</p><p>namespaced为true后，获取modules中的getters方式二</p><p>{{getGoods}}</p><h1>modules 开启命名空间mutations的使用</h1><p>namespaced为true后，获取modules中的mutations方式一</p><p>{{this.$store.getters['goods/getGoods']}}</p><button @click="addGoodsMutationsFun2">添加商品</button><p>namespaced为true后，获取modules中的mutations方式二</p><p>{{this.$store.getters['goods/getGoods']}}</p><button @click="addGoodsMutationsFun('足球')">添加商品</button><h1>modules 开启命名空间actions的使用</h1><p>namespaced为true后，获取modules中的actions方式一</p><p>{{this.$store.getters['goods/getGoods']}}</p><button @click="addGoodsActionsFun2">添加商品</button><p>namespaced为true后，获取modules中的actions方式二</p><p>{{this.$store.getters['goods/getGoods']}}</p><button @click="addGoodsActions">添加商品</button></div>
</template>
<script>
import {mapState} from 'vuex'
import {mapGetters} from 'vuex'
import {mapMutations} from 'vuex'
import {mapActions} from 'vuex'
export default {computed:{getGoods(){return this.$store.state.goods.goods},// 第一个参数：命名空间名字；第二个参数：state的数据...mapState('goods',['goods']),...mapGetters('goods',['getGoods'])},methods: {// ...mapMutations(['addGoodsMutationsFun'])addGoodsMutationsFun2(){this.$store.commit('goods/addGoodsMutationsFun','电视')},...mapMutations('goods',['addGoodsMutationsFun']),addGoodsActionsFun2(){this.$store.dispatch('goods/addGoodsActions','椅子')},...mapActions('goods',['addGoodsActions'])}
}
</script>
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import goods from './modules/goods.js'Vue.use(Vuex)
// 1.安装cnpm i -S Vuex
// 2.创建store文件夹，里面创建index.js
// 3.main.js 引入const store = new Vuex.Store({state:{ // 相当于data，存放数据job:'前端工程师',num:0},getters:{ //相当于computed，获取数据getJob(state){return state.job},getNum(state){return state.num}},mutations:{// 同步修改state数据increateMutation(state,num){state.num += num},reduceMutations(state,num){state.num -= num}},actions:{ // 异步修改mutationsreduceAction({commit},num){commit('reduceMutations',num)}},modules:{//模块化或命名空间goods}
})
export default storestore/modules/goods.js
const state = {goods:['电脑','键盘','手机']
}const getters = {getGoods(state){return state.goods}
}const mutations = {addGoodsMutationsFun(state,val){state.goods.push(val)}
}const actions ={addGoodsActions({commit},val){commit('addGoodsMutationsFun',val)}
}export default{state,getters,mutations,actions,
}
App.vue
<template><div id="app"><vuexTestDemo/></div>
</template><script>
import vuexTestDemo from './components/vuexDemo/vuexTestDemo.vue'
export default {name: 'App',components: {vuexTestDemo}
}
</script>结果：
modules模块化和命名空间的使用
modulesDemo.vue
<template><div><h1>modules 开启命名空间state的使用</h1><p>namespaced为true后，获取modules中的state方式一</p><p>{{this.$store.state.goods.goods}}</p><p>namespaced为true后，获取modules中的state方式二</p><p>{{getGoods}}</p><p>namespaced为true后，获取modules中的state方式三</p><p>{{goods}}</p><h1>modules 开启命名空间getters的使用</h1><p>namespaced为true后，获取modules中的getters方式一</p><p>{{this.$store.getters['goods/getGoods']}}</p><p>namespaced为true后，获取modules中的getters方式二</p><p>{{getGoods}}</p><h1>modules 开启命名空间mutations的使用</h1><p>namespaced为true后，获取modules中的mutations方式一</p><p>{{this.$store.getters['goods/getGoods']}}</p><button @click="addGoodsMutationsFun2">添加商品</button><p>namespaced为true后，获取modules中的mutations方式二</p><p>{{this.$store.getters['goods/getGoods']}}</p><button @click="addGoodsMutationsFun('足球')">添加商品</button><h1>modules 开启命名空间actions的使用</h1><p>namespaced为true后，获取modules中的actions方式一</p><p>{{this.$store.getters['goods/getGoods']}}</p><button @click="addGoodsActionsFun2">添加商品</button><p>namespaced为true后，获取modules中的actions方式二</p><p>{{this.$store.getters['goods/getGoods']}}</p><button @click="addGoodsActions">添加商品</button></div>
</template>
<script>
import {mapState} from 'vuex'
import {mapGetters} from 'vuex'
import {mapMutations} from 'vuex'
import {mapActions} from 'vuex'
export default {computed:{getGoods(){return this.$store.state.goods.goods},// 第一个参数：命名空间名字；第二个参数：state的数据...mapState('goods',['goods']),...mapGetters('goods',['getGoods'])},methods: {// ...mapMutations(['addGoodsMutationsFun'])addGoodsMutationsFun2(){this.$store.commit('goods/addGoodsMutationsFun','电视')},...mapMutations('goods',['addGoodsMutationsFun']),addGoodsActionsFun2(){this.$store.dispatch('goods/addGoodsActions','椅子')},...mapActions('goods',['addGoodsActions'])}
}
</script>
/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import goods from './modules/goods.js'Vue.use(Vuex)
// 1.安装cnpm i -S Vuex
// 2.创建store文件夹，里面创建index.js
// 3.main.js 引入const store = new Vuex.Store({state:{ // 相当于data，存放数据job:'前端工程师',num:0},getters:{ //相当于computed，获取数据getJob(state){return state.job},getNum(state){return state.num}},mutations:{// 同步修改state数据increateMutation(state,num){state.num += num},reduceMutations(state,num){state.num -= num}},actions:{ // 异步修改mutationsreduceAction({commit},num){commit('reduceMutations',num)}},modules:{//模块化或命名空间goods}
})
export default storestore/modules/goods.js
const state = {goods:['电脑','键盘','手机']
}const getters = {getGoods(state){return state.goods}
}const mutations = {addGoodsMutationsFun(state,val){state.goods.push(val)}
}const actions ={addGoodsActions({commit},val){commit('addGoodsMutationsFun',val)}
}export default{state,getters,mutations,actions,namespaced:true // 限定空间开启，这个如果不开启，getters,mutations,actions,都是全局的
}
App.vue
<template><div id="app"><modulesDemo/></div>
</template><script>
import modulesDemo from './components/vuexDemo/modulesDemo.vue'
export default {name: 'App',components: {modulesDemo}
}
</script>结果：
vue从入门到放弃（六）相关推荐
- vue从入门到放弃（五）
----------------------------------------------------点击这里<专栏目录>查看更多---------------------------- ...
- System Generator从入门到放弃(六)-利用Vivado HLS block实现VivadoHLS调用C/C++代码
System Generator从入门到放弃(六)-利用Vivado HLS block实现Vivado HLS调用C/C++代码 夜未央,流星落,情已殇 文章目录 System Generator从 ...
- 【一文学会】vue.js入门到放弃
最近正好学习了vue.js就准备将此记录下来,希望能给各位做个参考,当然因为技术有限所以出现很多错误,烦请大佬们能够不吝赐教,此篇博客会一直保持更新,以后关于vue就在本篇博文上填加内容了. VueJ ...
- Vue从入门到放弃（一）——指令篇
文章目录 1.v-if/v-else和v-show 1.1 v-if 1.2v-show 1.3区别 2.v-for 2.1遍历数组 2.2遍历对象 3.v-text和v-html 3.1v-text ...
- keras从入门到放弃(六）多层感知器(神经网络)
多层感知器(神经网络) 从线性回归模型和对数几率回归模型本质上都是单个神经元 计算输入特征的加权 使用一个激活函数计算输出 单个神经元(二分类) 多和神经元(多分类) 但是单层神经元有缺陷 无法拟合& ...
- Spring Boot Vue Element入门实战(完结)
最近给朋友做一个大学运动会管理系统,用作教学案例,正好自己也在自学VUE,决定用spring boot vue做一个简单的系统.vue这个前端框架很火,他和传统的Jquery 编程思路完全不一样,Jq ...
- webpack - vue Component 从入门到放弃（三）
离上一篇已经一个星期了,人的拖延症是没法救的,今晚趁着蒙蒙春雨,来抒发抒发情感. 上一篇简单介绍了webpack的配置,这里稍微再做一一下延伸 插件 插件可以完成更多 loader 不能完成的功能.插 ...
- JavaScript从入门到放弃 -（六）正则表达式
正则表达式 1. 正则表达式概述 1.1 什么是正则表达式 1.2 正则表达式的特点 2. 正则表达式在JavaScript中的使用 2.1 创建正则表达式 2.1.1 通过调用 RegExp 对象的 ...
- GPS从入门到放弃（二十六） --- RTKLIB函数解析
GPS从入门到放弃(二十六) - RTKLIB函数解析 为了贴合这个系列的标题"从入门到放弃",在入门之后现在就要放弃此方向了.虽然感觉遗憾,暂时也没有办法.在此附上此系列最后一篇 ...
最新文章
- FLEX中Sequence实例教程. 顺序执行的效果.
- anaconda怎么使用python包_Anaconda中python包的介绍与使用方法
- python 3.5 3.6 3.7_选择 Python3.6 还是 Python 3.7
- 【转】Windows编程之滚动条—滚动条消息
- 投入20亿，赋能1万家，阿里云正式启动云原生合作伙伴计划
- 项目分布式部署那些事（1）：ONS消息队列、基于Redis的Session共享，开源共享
- javaWeb（入门基础详解）
- 北航博士，研究所月入两万，是一种什么体验？
- 关于运营Tiktok账号的问题？
- sqlserver2005使用convert转换成各种格式的日期
- MYSQL中日期与字符串间的相互转换
- 计算机组成原理与汇编语言设计,计算机组成原理与汇编语言网络教学整体设计方案...
- 如何将多张图片合并成一个PDF文件
- nps是什么、怎么计算、有什么用
- 大学英语精读第三版（第四册）复习笔记——文章内容摘要
- Windows桌面端录屏采集实现
- OC内存管理常见面试题整理
- 微信小程序和微信小游戏的区别体现在哪？
- uniapp苹果无法上架_uni-app 打包ios上架app store流程
- r library car_R语言实战之回归分析