vuex实战,vuex详解和用法
本文主要介绍了vuex的入门课程，并对图形实例进行了分析，具有很好的参考价值。希望对大家有帮助。
目录
我理解概念的核心概念。不要胡说八道。直接在实例中解释安装和创建。然后看店铺的实例化。直接在实例中挂载存储。了解如何快速使用商店。简单解释一下，直接看效果。
我理解的概念
Vuex为vue提供了一个全局的状态存储，就像一个状态机一样，避免了父子和兄弟组件复杂的参数传递。他维护全球共享数据的一致性。
核心概念秒懂
1、数据由国家共享
2.getters在处理状态后获得所需的数据
3、突变唯一能修改状态的功能
4.动作只能显式调用突变，可以异步请求数据。
5.moudles把1、2、3、4的包当作一个模块，可以是多个，也可以不是。
不说废话直接在实例里面一一解释
项目结构：
安装
cnpm i vuex -S
创建
创建一个如图所示的商店。
以下代码都是moduleA代码，
state.js
常量状态={
用户信息：{
用户名：“品尝秋刀鱼长笛”，
年龄：28，
工作：“前端工程师”
},
朋友：[]，
女朋友：[
{
姓名：洛斯，
年龄：20，
国籍：“韩国”
},
{
姓名：“安妮”，
年龄：22，
国籍：“俄罗斯”
}
]
}
导出默认状态；
国家没什么好解释的。它只是一个物体。输入你想要的状态码。
getters.js
const getters={
userJob: (state)={
返回“{ state . userinfo . job }”
},
girlfirendInfo: (state，getters)={
const girl firend=state . girl firend
let info=girlfirend.map((item，index)={
return “{ index 1 }的女朋友叫{ item . name }，年龄{ item . age }，来自{ item . nationality } `的
}).联接(，)
Return总共有$ { girlfiend.length }个女朋友，${info}，可怕的是他只是一个${getters.userJob}。`
}
}
导出默认getters
getter接受两个参数，第一个是state，第二个是getter中的其他函数。
mutation.js
从“axios”导入axios；
常量突变={
ageAdd(状态，有效负载){
有效负载=有效负载 1
state.userInfo.age=有效负载
},
addGirlFirend(状态，有效负载){
state.girlfirend.push({姓名：有效载荷.姓名，年龄：有效载荷.年龄，国籍：有效载荷.国籍})
},
getFirend(状态，有效负载){
state.firend=有效负载
},
Mutfired (state) {//vuex禁止突变中的异步操作，严格模式给出错误，调试困难。
axios.get(/myServer )。然后(res={
if (res.status===200) {
state . firend=RES . data . data . list
}
})
}
}
导出默认突变；
Mutations接受两个参数：state payload(调用时携带的参数)，这是唯一可以修改状态的地方。注意，接口不能是异步的，也不能是可调的，严格模式会报错。
如图所示：
actions.js
从“axios”导入axios；
常量操作={
addGirlFirend ({ commit，state，getters }，payload) {
commit(addGirlFirend ，有效负载)；
},
GetFirends (ctx) {//ctx是当前存储下的模块对象。
axios.get(/myServer )。然后(res={
if (res.status===200) {
ctx.commit(getFirend ，res.data.data.list)
//您也可以直接在actions中修改状态，但不建议这样做。当您在严格模式下创建存储时，您将报告一个错误，这不符合vuex单向数据流的规范(您只能在分段中修改状态)
//CTX . state . firend=RES . data . data . list
}
})
}
}
导出默认操作；
Actions接受当前模块的一个上下文对象(通常是commit)，用来提交提交突变，主要是请求后端数据，可以是异步的。
index.js
从导入状态。/state ；
从导入getters。/getters ；
从导入突变。/mutations . js ；
从导入操作。/actions ；
常数模块A={
状态，
吸气剂，
突变，
行动
}
导出默认模块a；
组装组件以露出模块。
再来看看store的实例化
商店/索引. js
从" vuex "导入状态管理
从“vue”导入某视频剪辑软件
从""导入模块答./moduleA ；
从导入模块乙./moduleB ；
Vue.use(Vuex)
let store=new Vuex .商店({
//在严格模式下，无论何时发生了状态变更且不是由变化函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。
//*严格模式会深度监测状态树来检测不合规的状态变更——请确保在发布环境下关闭严格模式，以避免性能损失。
strict: process.env.NODE_ENV！==生产,//自动在生产环境下关闭严格模式
模块：{
moduleA，
模块b
}
})
导出默认存储
注意：一定要用使用一下vuex，最好使用严格模式！
当然商店里面还可以用命名空间和插件，一般项目用不上
挂载store
在项目主文件
主页。射流研究…实例化某视频剪辑软件时，挂载
新Vue({
埃尔： #app ，
路由器，
店，
组件：{ App }，
模板："应用程序/"
})
直接在实例里面看怎么快速使用store吧
helloWorld.vue
模板
差异
卡片样式=宽度：550像素
div slot=title
图标类型= IOs-film-outline /图标
个人信息
/div
差异
p姓名：{{userInfo.userName}}/p
p年龄：{{userInfo.age}}/p
{{girlfirendInfo}}
/div
/卡片
hr style=margin:20px 0 /
button type= success @ click= ageAdd()增加了一岁/按钮
hr style=margin:20px 0 /
按钮类型=成功@click=addAge 增加了两岁（提交)/按钮
hr style=margin:20px 0 /
卡片样式=宽度：550像素
div slot=title
图标类型= IOs-film-outline /图标
女友信息：
/div
差异
名字：
输入v-model=girlInfo.name/Input
年龄：/br
input-number:max= 100 :min= 1 v-model=女孩信息。年龄/输入数字/br
国籍：
输入v-model=女孩信息。国籍/输入
/div
button type= success @ click= addGirlFirend(女孩信息)增加/按钮
按钮类型=成功@click=addGirlFirend1 增加（调度)/按钮
/卡片
hr style=margin:20px 0 /
卡片样式=宽度：550像素
div slot=title
图标类型= IOs-film-outline /图标
朋友信息：
/div
差异
p v-for= item in firend :key= item。用户名“{ item。用户名} }/p
/div
按钮类型=info @click=getFirends 获取朋友/按钮
/卡片
/div
/模板
脚本
从" vuex "导入{ mapState，mapGetters，mapMutations，mapActions }
导出默认值{
data () {
返回{
girlInfo: {
名称： ,
年龄：18,
国籍：""
}
}
},
计算值：{
.mapGetters([girlfirendInfo])，
.mapState({
userInfo:state=州。模块a。userInfo，//使用状态管理的模块后一定要指明模块
state=state.moduleA.firend
})
},
方法：{
.mapActions([addGirlFirend ， getFirends])，//this .$store.dispatch(addGirlFirend ，有效负载)
.mapMutations([ageAdd])，//this .$store.commit(ageAdd ，有效负载)
//上面两个辅助函数方法的实质跟下面是一样的，推荐使用辅助函数
addAge () {
这个store.commit(ageAdd ，2)
},
addGirlFirend1 () {
这个. store.dispatch(addGirlFirend ，this.girlInfo)
}
}
}
先看一下初始用户界面吧
简单解释一下
主要的四个模块，有对应的四个辅助函数，用处是把状态和操作映射到当前页面
地图状态和地图获取者，是状态数据，放在计算属性；地图突变和地图操作是操作函数，显然放在方法里面；注意带的注释；
直接看效果吧
调用突变
调用行动
行动调接口
状态管理的问题，解决方法点击状态管理刷新状态就没了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。