前端面试必备Vuex的简单使用及原理分析

在开发中,我们会用应用程序处理很多的数据,这些数据需要保存在我们应用程序的某一个位置,对于这些数据的管理我们就称之为状态管理。

Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,解决多组件数据通信问题。

一、Vuex核心

Vuex可以帮助我们管理共享状态,并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。

如果你不打算开发大型单页应用,使用Vuex可能是繁琐冗余的。确实是如此——如果你的应用够简单,您最好不要使用Vuex。一个简单的store模式(opensnewwindow)就足够你所需了。但是,如果你需要构建一个中大型单页应用,你很可能会考虑如何更好地在组件外部管理状态,Vuex将会成为自然而然的选择。

VueX是采用集中式管理组件依赖的共享数据的一个工具,可以解决不同组件数据共享问题。

1、State:

包含了store中存储的各个数据。

用法:

conststore=newVuex.Store({

state:{

count:0

}

})

组件访问State中数据的三种方式:

this.$store.state.count

template

divstate的数据:{{$store.state.count}}/div

template

script

//安装完vuex会在组件中注入一个$store的变量

created(){

console.log(this.$store.state.count);

}

/script

使用计算属性


转载请注明:http://www.aierlanlan.com/rzgz/7581.html