vuex的使用,vuex辅助函数、muduld的详解(文章下边)

摘要:
1) Vuex怎么了nbsp; Vuex是Vue的一种特殊模式。js应用程序开发的状态管理模式-所有页面共享的变量2)当项目太大时使用Vuex,当项目太小时,它很麻烦,而且是多余的。如果您不打算开发大型单页应用程序,那么使用Vuex可能会很麻烦,而且是多余的。这是真的——如果你的应用程序足够简单,你最好不要使用Vuex。


1)什么事Vuex
    Vuex是一个专为Vue.js应用程序开发的状态管理模式---所有页面共享的变量
2)Vuex在什么情况下进行使用
在项目过大的时候采取使用,项目量较小的时候是繁琐冗余的
官网的说
如果您不打算开发大型单页应用,使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单,您最好不要使用 Vuex。
3)使用步骤
(以vue2.x脚手架为例)
3.1)下载安装:npm install vuex
3.2)在src文件夹下--->创store--->index.js 这个文件就是vuex状态管理
在文件中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const Store =new Vuex.Store({
state:{},//数据存储
mutations:{},//更改数据
actions:{}//触发,调用更改数据
getters:{//计算(类似computed)可以说是一个桥梁,不用直接访问state
getState(state){returen state.msg}//这样访问这个就相当于访问state中的msg
},
muduld:{newmuduld//这里是模块名字}//模块,每个模块都拥有这五种方法和属性
})
export default Store

  



在main.js引入

import store from './store/index'//index可省略
在vue实例中进行注册new Vue({//这里 store})

  

在页.vue组件中使用

获取样式:this.$store.state.count

methods中用在
**this.$store.commit("cNum")**

//cNum----->mutations定义的函数---》修改state值 cNum(state){state.num++} 同步

**this.$store.dispatch("acNum")**

//acNum--->actions定义的函数---->函数在触发-》 mutations中定义函数 ---》修改state值 异步(同步不可以操作异步,异步可以操作同步的)

getters在页面.vue的computed计算这里用
**computed:{getMsg(){renturn this.$store.getters.getState}}**
//这样调用getters中定义的定义

###Vuex辅助函数---》
**作用,就是使用更加的简洁(少敲代码,少掉点头发),使得在使用的.vue页面中访问storevuex页面更加的方便简介一点**
在那个.vue文件用,就在那里引用所要使用的 辅助函数
#####使用:在.vue

**在没有引入vuex辅助函数的时候我们使用是**
this.$store.commit("cNum")---》同步

this.$store.dispatch("acNum")异步

this.$store.state.count---》获取变量

this.$store.getters.getState---》计算变量
**在引入vuex函数后在访问就变成**
引用:**import {mapGetters,mapMutations,mapState,mapAction} from 'vuex'**
扩展:
**其中mapMutations和mapAction
在methods进行扩展出来...mapAction(["one","two"]/{"one":"o1","two":"t2"}) ,
mapGetters和mapState
在computed中进行扩展...mapState(['num']) ...mapGetters(['userInfo'])**
调用使用:
this.two()--->mapMutations和mapAction
this.num--->mapGetters和mapState
---
以...mapGetters(["one","two"]/{"one":"o1","two":"t2"}) 为例详解:
[]/{}中写的是在store中定义好的方法名,所以调用的时候就不再使用this.$store.getters.one而是直接this.one就可以访问到数值了
[]和{} 数组和对象可以,但是数组要 名字一样,对象可以改名,可以不改名字



Vuex模块化(优化)
将实例里的参数,独立出一个模块,然后在引用的index.js
state,
mutations,
actions,
getters, 将以上四个独立模块,
state.js---》let state ={}; export.default state //其余三个相同方法 (各个模块中若是用到彼此,在各个页面中可相互引用)
在store文件夹---》index.js 引入 这四个模块



axios调取接口存到state数据里
在actions调用---》在mutations存值----》存到state
注意:各模块中使用的别的模块的内容,要在模块中进行引用



muduld详解和使用
**muduld模块,每个模块都拥有这五种方法和属性state,mutations,actions,getters,muduld**
上述中我们只是说有一仓库的时候的使用,
muduld是在大仓库中放入的小仓库
在主index文件中
vuex的使用,vuex辅助函数、muduld的详解(文章下边)第1张

创建引入的这user/order.js中的内容---每个模块可有可没有,但都支持
vuex的使用,vuex辅助函数、muduld的详解(文章下边)第2张
在小仓库user/order创建命名空间---使小仓库独立
vuex的使用,vuex辅助函数、muduld的详解(文章下边)第3张
在页面.vue中的使用
vuex的使用,vuex辅助函数、muduld的详解(文章下边)第4张
然后使用的方式就和上述中的使用方式一样,访问每个小仓库中的那样使用

调用使用:
this.two()--->mapMutations和mapAction
this.num--->mapGetters和mapState
---
不使用命名空间的使用------稍微带一嘴
vuex的使用,vuex辅助函数、muduld的详解(文章下边)第5张

免责声明:文章转载自《vuex的使用,vuex辅助函数、muduld的详解(文章下边)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇ASP.NET Core MVC上传文件禁止浏览器记住密码操作下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

vue前端导入excel表格并解析表格内数据

vue前端导入excel表格并解析表格内数据 需求 用户需要输入一系列的ip 如果ip过多手动输入太麻烦,所以用户可以把ip写入Excel表格,然后导入 为防止用户创建Excel表格时格式错误,所以我们提供一个模板供下载 插件 npm install xlsx --save 代码 HTML代码(用的是element-ui,不同前端框架获取到的对象可能...

vue的坑

1. (vue2.x以上,1.x没有问题)vue和jq一起使用的冲突:在使用了v-bind: class的元素上,当vue和jq都需要增改class时,用jq加的属性可能无效。 原因:当数据的布尔值改变后(比如某个class需要加上),由于vue是在本次事件轮结束后更新DOM或改变属性,而jq的addClass是同步的,所以jq加上的类名会被vue覆盖。...

Vue的编译过程

碰到是否有template选项时,会询问是否要对template进行编译: 在template编译(渲染成UI)有一个过程。模板通过编译生成AST,再由AST生成Vue的渲染函数,渲染函数结合数据生成Virtual DOM树,对Virtual DOM进行diff和patch后生成新的UI。将上图细化一下,也就是template编译的过程如下图所示:...

vue组件实现简单的路由

首先在当前项目下安装依赖包,运行npm install  vue-router  则package.json中添加了vue-router 此时在src 下的index.js主程序中引入vue-router,同时告诉Vue使用此路由配置 1 import VueRouter from "vue-router" 2 Vue.use(VueRouter); 在i...

vue组件之echarts报表

vue组件之echarts报表 将echarts报表封装成组件,动态传入数据,显示图表。 1.饼状图 父组件: <MPie :datas="piedata"></MPie> <!--piedata为传入的数据--> data:function(){ return { piedata:{ htmldiv:'m...

Vue 简单实例 地址选配8

我们可以看到所有的地址都是点亮的状态,就是外面都有个橙色的框。我们需要把默认地址,才设置为点亮的状态。 1、新建变量checkedIndex,默认为 0,然后把遍历地址列表,把字段isDefault为true的地址索引赋值给checkedIndex data() { return{ checkedIndex: 0, //默认选中的索引...