vuex详解和用法,vuex使用步骤
这篇文章主要介绍了某视频剪辑软件中的插件：Vuex。本文将围绕它的优缺点、使用场景和示例展开详细的说明，感兴趣的小伙伴可以跟随小编一起了解一下
目录
简介优缺点优点缺点使用场景示例安装状态管理并引入1.安装vuex2 .编写状态管理的商店3 .主网站引入CounterStore.js业务代码测试
简介
说明
本文介绍某视频剪辑软件的插件：Vuex。包括：优缺点、使用场景、示例。
官网
官网文档
API vuex-商店
优缺点
优点
1.响应式
属于某视频剪辑软件生态一环，能够触发响应式的渲染页面更新(本地存储就不会)
2.可预测的方式改变数据
避免数据污染
3.无需转换数据
射流研究…原生的数据对象写法（不需要做转换)。（本地存储需要做转换)
缺点
1.复杂
适合大应用，不适合小型应用
2.不能持久化（刷新页面后状态管理中的状态会变为初始状态)
解决方案
结合本地存储
vuex-持续状态插件
使用场景
当我们多个页面需要共享数据时就可以使用Vuex。
实际开发中我们一般在下面这种情况使用它：
当前登录用户的信息
购物车的信息
收藏的信息
用户的地理位置
示例
本处用计数器来测试：一个组件修改计数器的值，其余两个不相关组件可以监测到时计数器值的改变。
做法：一个组件（组件答将数据共享给另外两个不相关组件（组成部分b和ComponentC)，外部用Parent.vue放置这三个组件。
安装Vuex并引入
1.安装vuex
在工程目录下执行：国家预防机制安装状态管理
2.编写vuex的store
创建目录店，在其下边创建CounterStore.js，内容如下：
从“Vue”导入Vue
从" Vuex "导入Vuex
vue。使用(Vuex)；
const couterStore=new Vuex .商店（
{
状态：{
计数1: 0,
count2: 0，
},
突变：{
增量1(状态){
州. count1
},
减量1(状态){
状态。计数1-；
},
增量2: state=state.count2，
decrement2: state=state.count2 -，
}
}
);
导出默认couterStore
3.main.js引入CounterStore.js
//要用"导入"命令加载的某视频剪辑软件构建版本
//(仅运行时或独立)已在webpack.base.conf中用别名设置。
从“vue”导入某视频剪辑软件
从导入应用程序 0.5/App
从导入路由器。/路由器
从导入CouterStore ./商店/柜台商店
Vue.config.productionTip=false
/* eslint-禁用无-新*/
新Vue({
埃尔： #app ，
路由器，
商店：CouterStore，
组件：{ App }，
模板："应用程序/"
})
按照射流研究…语法，键与价值重名时可以简写：(很多教程这么写)
//要用"导入"命令加载的某视频剪辑软件构建版本
//(仅运行时或独立)已在webpack.base.conf中用别名设置。
从“vue”导入某视频剪辑软件
从导入应用程序 0.5/App
从导入路由器。/路由器
从导入存储。/商店/柜台商店
Vue.config.productionTip=false
/* eslint-禁用无-新*/
新Vue({
埃尔： #app ，
路由器，
店，
组件：{ App }，
模板："应用程序/"
})
业务代码
代码
ComponentA.vue
模板
div class=容器
h3组件A/h3
button @click=increment1 增加：第一个计数器/按钮
button @click=decrement1 减少：第一个计数器/buttonbrbr
button @click=increment2 增加：第2个计数器/按钮
按钮@click=decrement2 减少：第2个计数器/按钮
/div
/模板
脚本
导出默认值{
data() {
返回{
计数1: 0,
count2: 0，
}
},
方法：{
增量1() {
这个store.commit(increment1 )
},
减量1() {
这个store.commit(decrement1 )
},
增量2() {
这个store.commit(increment2 )
},
减量2() {
这个store.commit(decrement2 )
}
}
}
/脚本
样式范围。容器{
边距：20px
边框：2px纯蓝；
填充：20px
}
/风格
组件B.vue
模板
div class=容器
h3组件B/h3
计数器的值：{{msg}}
！-也可以这么写： -
！-计数器的值：{ {这个. store.state.count1}} -
/div
/模板
脚本
导出默认值{
计算值：{
msg() {
归还这个100美元商店。状态。计数1；
}
}
}
/脚本
样式范围。容器{
边距：20px
边框：2px纯蓝；
填充：20px
}
/风格
ComponentC.vue
模板
div class=容器
h3ComponentC/h3
计数器的值：{{msg}}
！-也可以这么写： -
！-计数器的值：{ {这个. store.state.count2}} -
/div
/模板
脚本
导出默认值{
计算值：{
msg() {
归还这个100美元商店。状态。计数2；
}
}
}
/脚本
样式范围。容器{
边距：20px
边框：2px纯蓝；
填充：20px
}
/风格
Parent.vue
模板
div class=outer
h3父组件/h3
组分a/组分a
组件b/组件b
组件分组件c
/div
/模板
脚本
从导入组件答./ComponentA ；
从导入组件乙./ComponentB ；
从导入组件丙./ComponentC ；
导出默认值{
姓名：家长，
组件：{ComponentA，ComponentB，ComponentC}，
data() {
返回{
姓名："托尼",
年龄：20,
电话号码："1234567890"
}
}
}
/脚本
样式范围。外部{
边距：20px
边框：2px纯红；
填充：20px
}
/风格
路由
从“vue”导入某视频剪辑软件
从“vue路由器"导入路由器
导入父项自./components/Parent ；
Vue.use(路由器)
导出默认新路由器({
路线：[
{
路径："/parent "，
姓名：家长，
组件：父组件，
}
],
})
测试
访问：http://localhost:8080/#/parent
到此这篇关于某视频剪辑软件学习之状态管理的使用详解的文章就介绍到这了，更多相关状态管理使用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。