当前位置 : 首页 - vuex是什么?如何使用?

vuex是什么?如何使用?

发布时间:2021年4月29日 18:41 作者:誉新源

什么是Vuex?

在Vue项目中,如果项目结构简单,父子组件之间的数据传输可以通过props或$emit(详见博文《Vue高级(6):组件之间的数据传输))。如果是大型项目,很多时候都需要在子组件之间传递数据,使用之前的方式就不太方便。Vue状态管理工具Vuex完美解决了这个问题。
首先,我们需要知道vue是由单向数据流驱动的。
多个视图依赖于同一状态。
来自不同视图的行为需要变更同一状态。
Vuex类似于Redux的状态管理器,用于管理Vue的所有组件状态,集中存储管理应用于所有组件的状态,并以相应的规则保证状态以可预测的方式改变。
状态机是保存状态和状态变化的盒子。这里有一些不同类型的状态机,适合我们的是有限的状态机。像它的名字一样,有限状态机包含有限的几种状态。它接收一个输入,并根据该输入和当前状态决定下一个状态。输出可能有多种情况。当状态机改变了状态,我们就称为它过渡到一个新的状态。


Vuex关系链


每一个Vuex应用的核心就是store(仓库)。store基本上是一个容器,它包含了应用程序中的大部分状态。Vuex和简单的全局对象有以下两个区别:
Vuex的状态存储是响应性的。如果Vue组件从store读取状态,则store。
如果中间状态发生变化,相应的组件将相应地高效更新。
不能直接改变store中的状态。在store中改变状态的唯一方法是显式提交mutation。
这使我们能够方便地跟踪每个状态的变化,从而使我们能够实现一些工具,帮助我们更好地理解我们的应用程序。

vuex如何使用?


一、安装并引入Vuex


项目结构:
Vue项目结构
注意:当应用变得更加复杂时,store对象可能会变得更加臃肿。
这种情况下,vuex把store分成模块(module),每个模块都有自己的state,mutation,action,getter,甚至是嵌套模块等等。
先用npm安装Vuex。
cnpminstallvuex-S
然后在main.js中引入store.js,然后注入store。
importVuefrom'vue'importAppfrom'./App'importVuexfrom'vuex'importstorefrom'./vuex/store'//让vue使用vuex工具实现组件间的数据共享Vue.use(Vuex)/*eslint-disableno-new*/newVue({el:'#ap',//注入storestore,render:h=>h})


二、构建核心仓库store.js


Vuex应用程序的状态state应该存储在store.js中,Vue组件可以从store.js中获得状态,store可以通俗地理解为全球变量仓库。
但是,其和单纯的全局变量又有一些区别,主要体现在当store中的状态发生改变时,相应的vue组件也会得到高效更新。
在src目录下创建一个vuex目录,将store.js放到vuex目录下。
importVuefrom'vue'importVuexfrom'vuex'Vue.use(Vuex)conststore=newVuex.Store({//定义状态,存储数据的对象,我们可以将你需要存储的数据在这个state中定义state:{author:'WiseWrong'}})exportdefaultstore
这个store.js非常简单,它只存储一个状态author。
注:虽然在main.js中已经引入了Vue和Vuex,但是这里还得再引入一次.


三、将状态映射到组件


这是footer.vue的html和script部分。
在computed中,将this.$store.state.author的值返回给html中的author。页面渲染之后,就能获取到author的值。


四、在组件中修改状态


然后在header.vue中添加输入框,将输入框的值传递给store.js中的author。这里使用Element-UI作为风格框架。
上面将输入框input的值绑定为inputTxt,然后在后面button上绑定click事件,触发setAuthor方法。
methods:{setAuthor:function(){this.$store.state.author=this.inpuTxt}}
在setAuthor方法中,将输入框的值inputTxt分配给Vuex中的状态author,实现子组件之间的数据传输。


五、官方推荐的修改状态的方式


以上例子是在setAuthor中直接使用赋值来修改状态author,但vue官方建议使用以下方法:
首先在store.js中定义一个方法newAuthor,其中第一个参数state就是$store.state,第二个参数msg需要另外传入,然后修改header.vue中的setAuthor方法。
此处使用$store.commit调用mutations中定义的函数newAuthor,即操作state中定义的会员函数,并将this.inputTxt传送到msg,以修改author。
你不能直接改变store中的状态!在store中改变状态的唯一方法是显式提交mutation(this.$store.commit(mutations方法名,值)。如此显著的提交(commit)mutations,能让我们更好的跟踪每个状态的变化,因此在大型项目中,建议采用第二种方法。
/存储数据的对象,我们可以将你需要存储的数据在这个state中定义conststate={//当前登陆的用户名username:''}constmutations={//提供一个方法,为state中的username赋值//这些方法有一个默认的参数,这个参数就是当前store中的StatesetUserName(state,username){//存入一个值state.username=usernamelocalStorage.setItem('myname',username)},getUserName(state){//输出一个值returnstate.username}}//使用的时候--->通过commit调用mutations中定义的函数,这个函数就是操作state中定义的成员的函数//this.$store.commit('setUserName',res.data.usernam

相关文章