网站前端开发之vue中的vuex介绍

来源： All文章

发布时间：2023-04-21 16:00:09

　　网站前端开发技术vue一骑绝尘，成为前端开发的首选语言，比传统前端、react更加受人喜欢，对于开发系统级别的应用是非常适合使用vue的，开发企业站等逻辑简单的网站，考虑到seo和维护成本，可能还是使用传统的前端适合。今天中企动力给大家介绍vue中非常重要的vuex.

　　什么是vuex呢？

　　Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

　　大家都知道vue是前后端分离的，我们传统开发中，可以使用后端的session来存储token、用户名等信息，那么如果前后端分离了，就不能使用后端的session了，那么怎么办呢？解决办法就是vuex，相当于后端的更高级版的session.

　　vuex状态管理以下部分：

　　state，驱动应用的数据源；

　　view，以声明方式将state映射到视图；

　　actions，响应在view上的用户输入导致的状态变化。

　　他们的关系如下图

　　vuex存在的必要性

　　vue的data保存的state只能当前页面有效，子组件或者其他页面则无效，如果有一些状态如token、登录信息、权限等需要全局同步的状态则实现不了，那么这时候就需要使用vuex.

　　vuex怎么安装呢？

　　很简单，使用命令

　　npminstallvuex--save

　　或者

　　yarnaddvuex

　　程序代码中引入方法

　　importVuefrom'vue'

　　importVuexfrom'vuex'

　　Vue.use(Vuex)

　　使用简单示例

　　importVuefrom'vue'

　　importVuexfrom'vuex'

　　Vue.use(Vuex)

　　conststore=newVuex.Store({

　　state：{count：0}，

　　mutations：{

　　increment(state){state.count++}}

　　})

　　现在，你可以通过store.state来获取状态对象，以及通过store.commit方法触发状态变更：

　　store.commit('increment')

　　使用起来还是可以灵活多变，具体大家可以慢慢研究。

* 文章来源于网络，如有侵权，请联系客服删除处理。