vuex几种状态,vuex状态管理几种状态
Vuex是一个专门为Vuejs应用设计的状态管理工具。本文主要介绍关于Vuex状态机的快速理解和实例应用的相关信息。有需要的朋友可以参考一下。
:
目录
1.快速概念：1。组件之间共享数据的方法：2 .什么是Vuex: 2。基本用途：3。创建项目：4。解释前提：5。核心理念：1。状态：1.1访问组件中状态的第一种方式：1.2访问组件中状态的第二种方式：2。突变。第一种方式：2.2触发变异和传递参数：2.1触发变异：3.1触发动作：3.2触发动作异步任务和传递参数：3.3触发动作：4。Getter: 4.2触发getter:6。总结：
一. 速识概念：
1. 组件之间共享数据的方式：
通常有以下几种方式：
从父代向子代传递值：v-bind 属性绑定；
从子代到父代传递值：v-on 事件绑定；
组件间共享数据：EventBus；
2. vuex是什么：
官方上，Vuex是为Vue.js应用开发的状态管理模型。它采用集中存储来管理应用程序所有组件的状态，并确保状态以可预测的方式随相应的规则变化。Vuex还集成到了Vue的官方调试工具DevTools Extension(打开新窗口)，提供了零配置的穿越调试、状态快照的导入导出等高级调试功能。
简单来说，Vuex是一种实现组件全局状态(数据)管理的机制，可以方便地实现组件之间的数据共享。
3.使用vuex的优势：
能够在vuex中集中管理共享数据，便于后期开发和维护。
它可以高效地实现组件间的数据共享，提高开发效率。
vuex中存储的数据是响应式的，可以保持数据与页面实时同步。
解决了非父子组件的消息传递(状态存储数据)。
为了减少AJAX请求的数量，一些场景可以直接从内存中的状态获得。
通常，只有组件之间共享的数据才需要存储在vuex中。对于组件中的私有数据，则没有必要，仍然可以存储在组件本身的数据中。当然，如果你希望这一切都存在于vuex中，也是可以的。
二. 基本使用：
1.安装依赖包：
npm安装vuex -保存
2.导入依赖包：
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
3.创建商店对象：
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
const store=new Vuex。商店({
//状态存储全局共享的数据。
状态：{
计数：0
}
})
4.将商店对象挂载到vue实例中：
新Vue({
埃尔： #app ，
商店
})
此时，所有组件都可以从存储中获取数据。
三.创建项目：
创建一个vue项目流程，后面会有一个案例：
(1)打开cmd窗口，进入vue ui，打开vue的可视化面板：
(2)选择新项目路径：
(3)命名：
(4)手动选择配置，注意使用vue2版本：
(5)创建：
(6)下一步：
(7)创建成功后，打开相应目录下的vscode，开始编程：
(8)运行项目：
四. 讲解前提：
前提（注意）：
写一个小的计数器案例，从案例，配合概念可以更快上手vuex。所以下面核心概念的代码部分就是基于这个小案例来演示的。目标：编写两个具有共同计数值的子组件。在父组件中，一个组件在单击后将计数值减少1，另一个组件在单击后将计数值增加1。
父组件App.vue初始代码：
模板
div id=应用程序
我的添加/我的添加
p - /p
我的减少/我的减少
/div
/模板
脚本
//引入组件
“导入添加自”。/components/Add.vue
“导入减少自”。/components/Reduce.vue
导出默认值{
名称：“应用程序”，
data() {
返回{
}
},
组件：{
我的-添加:添加，
我的-减少:减少
}
}
/脚本
子Add.vue初始代码：
模板
差异
Pcount值为：/p
按钮1/按钮
/div
/模板
脚本
导出默认值{
data() {
返回{
}
},
}
/脚本
Component Reduce.vue初始代码：
模板
差异
Pcount值为：/p
按钮-1/按钮
/div
/模板
脚本
导出默认值{
data() {
返回{
}
},
}
/脚本
商店的初始代码是：
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
导出默认的新Vuex。商店({
状态：{
计数：0
}
})
初始效果：
五.核心概念：
1.state：
官方说法如下：Vuex使用单一状态树3354。是的，它用一个对象包含所有应用程序级状态。此时，它作为“唯一的数据源(SSOT)”存在。这也意味着每个应用程序将只包含一个store实例。
简单来说，即状态提供唯一的公共数据源，所有的共享数据都应该存储在存储的状态中。
1.1 组件中访问state的第一种方式：
组件中，直接输入以下命令：
此引用的数据的名称。$商店.州
如Add.vue子组件中所引用的：
模板
差异
pcount的值为：{{this。$store.state.count}}/p
按钮1/按钮
/div
/模板
//后面部分代码和之前一样没有变化，所以省略。
看效果，它显示count的值为0:
1.2 组件中访问state的第二种方式：
(1)按需从vuex导入mapState函数。
从“vuex”导入{ mapState }
(2)通过刚刚导入的mapState函数，将当前组件所需的全局数据映射到当前组件的计算属性上：
计算值：{
.mapState([计数])
}
知识：computed用于监控自己定义的变量。这个变量没有在data中声明，而是直接在computed中定义。然后，它可以用于页面上的双向数据绑定，以显示结果或其他处理；
如Reduce.vue子组件中所述：
模板
差异
Pcount值为：{{count}}/p
按钮-1/按钮
/div
/模板
脚本
从“vuex”导入{mapState}
导出默认值{
data() {
返回{
}
},
计算值：{
.mapState([count])
}
}
/脚本
看看效果，它还显示count的值为0:
2. mutation：
官方表示，改变Vuex的商店中的状态的唯一方法是提交突变。Vuex中的突变与事件非常相似：每个突变都有一个字符串和回调函数(处理程序)的事件类型。这个回调函数是我们实际进行状态更改的地方，它将接受状态作为第一个参数。
简单来说，突变就是用来改变存储中的数据。
商店数据只能通过突变来改变，不能直接操作商店中的数据。
这样虽然操作有点繁琐，但是可以集中监控所有的数据变化。
例如，要实现将计数值增加1的操作，请在前面的活动中定义一个增加1的函数。然后，如果对应的子组件想要使用，组件会直接引入变异，调用对应的函数。
如下，Add.vue子组件应该实现自动递增1的功能：
首先，在状态机中定义一个可以实现自增量的函数add:
导出默认的新Vuex。商店({
状态：{
计数：0
},
突变：{
//自增1函数
添加(状态){
状态.计数
}
}
})
2.1 触发mutation的第一种方式：
Add.vue子组件将click事件绑定到按钮并触发突变：
模板
差异
pcount的值为：{{this。$store.state.count}}/p
button @click=btnAdd 1/button
/div
/模板
脚本
导出默认值{
data() {
返回{
}
},
方法：{
btnAdd() {
//第一种引入突变的方式触发add函数。
这个。$store.commit(add )
}
}
}
/脚本
看效果。点击并增加：
2.2 触发mutation并传参数：
当然，在组件中调用突变中的函数时，也可以传递参数。
例如，有一个来自递增函数的参数，但增加多少取决于调用：
导出默认的新Vuex。商店({
状态：{
计数：0
},
突变：{
//传入参数，第一个必须是state，第二个是传入的参数。
//自增n的功能
addN(state，n){
state.count=n
}
}
})
调用相应组件时要传入的参数：
方法：{
btnAdd2() {
//引入突变来触发addN函数
//并传递参数，自增6。
这个。$store.commit(addN ，6)
}
}
2.1 触发mutation的第二种方式：
(1)按需从vuex导入mapMutations函数。
从“vuex”导入{ mapMutations }
(2)通过刚刚导入的mapMutations函数将所需的mutations函数映射到当前组件的methods方法：
方法：{
.映射突变([add ， addN])
}
在实战中，减少的功能需求。实现了vue组件的点击减少1:
增加状态机的自动递减功能：
导出默认的新Vuex。商店({
状态：{
计数：0
},
突变：{
//自增1函数
添加(状态){
状态.计数
},
//递减1的函数。
子(州){
状态。计数-
}
}
})
点击Reduce.vue组件按钮，实现1:
模板
差异
Pcount值为：{{count}}/p
button @click=btnSub-1/button
/div
/模板
脚本
//导入
从“vuex”导入{mapState，mapMutations}
导出默认值{
data() {
返回{
}
},
计算值：{
.mapState([count])
},
方法：{
//映射变异中的子函数
.地图突变([sub])，
//若要递减，请调用sub函数。
btnSub(){
this.sub()
}
}
}
/脚本
看效果：
3.Action：
至此，第四点中的案例已经完成，实现了自增自减。现在如果要改善情况，点击按钮一秒后就增加自减。如何才能实现这一点？能不能在状态机的突变中给函数加一个1秒的定时器？这个肯定不行，因为mutation里不支持异步操作，所以怎么办？当当当当，行动出道。
Action可以包含任何异步操作，因此它用于处理异步任务。
动作提交突变而不是直接改变状态。记住它不能直接修改状态中的数据，只有突变可以。也就是说，如果通过异步操作改变数据，必须通过动作而不是突变来改变，但在动作中，还是要通过触发突变来间接改变数据。
首先在状态机中定义动作：
导出默认的新Vuex。商店({
状态：{
计数：0
},
突变：{
//自增1函数
添加(状态){
状态.计数
},
//递减1的函数。
子(州){
状态。计数-
}
},
//定义action，里面的addAsync函数会在1秒后执行突变中的add函数。
动作：{
addAsync(上下文){
setTimeout(()={
//必须通过context.commit()触发突变
context.commit(add )
},1000)
}
}
})
Action函数接受与store实例具有相同方法和属性的context对象，因此您可以调用context.commit来提交变异。
3.1 触发Action的第一种方式：
修改组件的Add.vue代码，引入动作实现异步自动增量。
模板
差异
pcount的值为：{{this。$store.state.count}}/p
button @click=btnAdd 1/button
/div
/模板
脚本
导出默认值{
data() {
返回{
}
},
方法：{
btnAdd() {
//引入Action的第一种方式触发addAsync函数。
//这里的dispatch专用于调用action函数
这个。$store.dispatch(addAsync )
}
}
}
/脚本
看效果，1秒后实现自我增值：
3.2 触发Action异步任务并传参数：
当然，当组件调用运行中的函数时，它也可以传递参数。
比如有一个自增函数，点击1秒后执行，但是增加量取决于调用时传入的参数：
定义：
导出默认的新Vuex。商店({
状态：{
计数：0
},
突变：{
//传入参数，第一个必须是state，第二个是传入的参数。
//自增n的功能
addN(state，n){
state.count=n
}
},
动作：{
//有一个参数n，在变异中传递给addN函数。
addNAsync(context，n) {
setTimeout(()={
context.commit(addN ，n)
},1000)
}
}
})
调用相应组件时要传入的参数：
方法：{
btnAdd2() {
//调用调度函数
//当动作被触发时，延时参数为6，即递增6。
这个。$store.dispatch(addNAsync ，6)
}
}
3.3 触发Action的第二种方式：
(1)按需从vuex导入mapActions函数。
从“vuex”导入{ mapActions }
(2)通过刚刚导入的mapactions函数，将所需的actions函数映射到当前组件的methods方法：
方法：{
.mapActions([add ， addN])
}
在实战中，减少的功能需求。点击后vue分量会减少一秒：
将动作中的子同步定义为一秒钟后的自减函数：
导出默认的新Vuex。商店({
状态：{
计数：0
},
突变：{
//自增1函数
添加(状态){
状态.计数
},
//递减1的函数。
子(州){
状态。计数-
}
},
动作：{
addAsync(上下文){
setTimeout(()={
context.commit(add )
},1000)
},
子同步(上下文){
setTimeout(()={
context . commit(“sub”)
},1000)
}
}
})
更改Reduce.vue代码以实现该功能：
模板
差异
Pcount值为：{{count}}/p
button @click=btnSub-1/button
/div
/模板
脚本
//导入
从“vuex”导入{mapState，mapActions}
导出默认值{
data() {
返回{
}
},
计算值：{
.mapState([count])
},
方法：{
//映射动作中的功能
.mapActions([subAsync])，
//若要递减，请调用subAsync函数。
btnSub(){
this.subAsync()
}
}
}
/脚本
看效果：
4. Getter：
Getter用于处理存储中的数据以形成新数据。请注意，它不会修改状态中的数据。
Getter可以对存储中已有的数据进行处理，形成新的数据，类似于Vue的计算属性。
当存储器中的数据发生变化时，Getter的数据也会发生变化。
例如，有一个getter函数返回当前计数1:
导出默认的新Vuex。商店({
状态：{
计数：0
},
getters: {
showNum(state){
返回当前计数值加1等于：$ {state.count1 } `的值
}
}
})
4.1触发getters的第一种方式：
这个。$ store.getters.name
在App.vue组件中显示：
模板
div id=应用程序
我的添加/我的添加
p - /p
我的减少/我的减少
p - /p
h3 { {这个。$store.getters.showNum}}/h3
/div
/模板
效果：
4.2触发getters的第二种方式：
(1)按需从vuex导入mapGetters函数。
从“vuex”导入{ mapGetters }
(2)通过刚刚导入的mapGetters函数将当前组件所需的全局数据映射到当前组件的计算属性中：
计算值：{
.mapGetters([showNum])
}
或者使用App.vue中的句柄：
模板
div id=应用程序
我的添加/我的添加
p - /p
我的减少/我的减少
p - /p
h3{{showNum}}/h3
/div
/模板
脚本
//引入组件
“导入添加自”。/components/Add.vue
“导入减少自”。/components/Reduce.vue
//导入mapGetters函数
从“vuex”导入{mapGetters}
导出默认值{
名称：“应用程序”，
data() {
返回{
}
},
组件：{
我的-添加:添加，
我的-减少:减少
},
//引入getter
计算值：{
.mapGetters([showNum])
}
}
/脚本
看，同样的效果：
六.总结：
关于Vuex状态机的快速理解和示例应用的文章到此结束。更多相关Vuex状态机应用内容，请搜索我们之前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。