400-800-9385
网站建设资讯详细

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

发表日期:2023-03-04 16:36:08   作者来源:river   浏览:1005   标签:网站前端开发    
网站前端开发技术vue一骑绝尘,成为前端开发的首选语言,比传统前端、react更加受人喜欢,对于开发系统级别的应用是非常适合使用vue的,开发企业站等逻辑简单的网站,考虑到SEO和维护成本,可能还是使用传统的前端适合。今天方维网络给大家介绍vue中非常重要的vuex.

什么是vuex呢?

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

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

vuex状态管理以下部分:

state,驱动应用的数据源;
view,以声明方式将 state 映射到视图;
actions,响应在 view 上的用户输入导致的状态变化。

他们的关系如下图
 

vuex关系


vuex存在的必要性

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


vuex怎么安装呢?

很简单,使用命令

npm install vuex --save 
或者
yarn add vuex

程序代码中引入方法

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)


使用简单示例


import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
state: { count: 0 },
mutations: {
increment (state) { state.count++ } }
})

现在,你可以通过 store.state 来获取状态对象,以及通过 store.commit 方法触发状态变更:
store.commit('increment')

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

如没特殊注明,文章均为方维网络原创,转载请注明来自https://www.szfangwei.cn/news/6707.html