手机版

详细说明vuex状态管理模式

时间:2021-08-29 来源:互联网 编辑:宝哥软件园 浏览:

一、前言

这一次,我们接受了一个BI系统,要求是能够访问数据源——获取数据集——处理数据集——将它们显示为数据可视化。为了接入公司自有产品,后端技术采用spring boot,前端采用vue vuex axios的项目架构。作为vue的一个状态管理,vuex是一个特别重要的部分。在这里,我将总结vuex是如何工作和使用的,希望能提到更多的错误。

其次,vuex易于使用

安装vuex

Cnpm install vuex - save在src目录下创建一个名为store的文件夹,并创建index.js

如图所示:

在index.js中引入vue和vuex状态管理,导出vuex,代码如下:

从' vue '导入Vue从' vuex'Vue.use(Vuex)const store导入Vuex=new Vuex。存储({ state: { token: 0 },})导出默认存储;将新创建的商店引入main.js,并将其用作vue的商店

从“vue”导入vue,从“导入应用程序”。/app.vue“从导入商店”。/store/index ' vue . config . production tip=false new vue({ render 3360h=h(app),store})。$ mount(“# app”)来获取存储中的令牌

在vue的组件中,如果想要获取vuex中的全局数据,可以把vue想象成一个下有很多属性的类,包括我们刚刚注入的vuex,如图所示

我们可以看到vue本身就是一个json,下面是object $store,下面是state $ store,这是vue里面存储的全局数据,我们的数据可以通过这个来获取。组件中的$store.state.token。

第三,吸气剂,vuex的核心概念

有时,当我们需要对获取的数据进行一些简单的过滤或处理时,吸气剂就会发挥作用。

代码如下

getter s : { getToken(state){ return state . token;}与直接获取token的方式相同。Getters也被安装在$store下,所以我们可以用这个来调用它的函数。$ store . state . getters . gettoken .但是vuex为我们提供了一个mapGetters可以映射到对应getter的方法,用法如下

从“vuex”导入{mapGetters,mapActions}导出默认{ name: ' app,组件: { HelloWorld },Computed: {.mapgetter([' gettoken '])},mounted () {console.log (this。console.log(这。$商店。getterss.gettoken)},}映射的getter仍然安装在vue上,如图所示

四.vuex核心概念的变化和作用

我们可以把突变理解为一个事件函数,动作是触发器,通过它动作启动动作。

简单的示例代码如下。

mutation : { setToken(state,n){ state . token=state . token n;}},actions : {settoken ({commit},n) {commit ('settoken ',n)}}用于组件中,这与getters的用法相同。代码如下

从“vuex”导入{mapGetters,mapActions}导出默认{ name: ' app,组件: { HelloWorld },computed: {.mapgetter([' getToken '])},已挂载(){ console . log(this)console . log(this . settoken(1))console . log(this . getToken)},Methods :映射动作(['set token'])},同样的属性可以在vue的json中找到。

动词(verb的缩写)mudules,vuex的核心概念

Vuex允许我们将存储分成不同的模块,每个模块有四个存储核心:getters、state、variations和actions。

应该注意的是,如果在模块内部添加名为sapced:true的属性。取值时需要稍作改动。当从mapGetters映射到mapActions时,需要使用模块名作为获取模块的getters和Actions的方式。模块化代码如下

从' vue '导入Vue从' Vuex '导入Vue . use(Vuex)const Modulea={ namespace d : true,state: { a:1 },mutations: { },actions: { },getter 3360 { geta(state){ return state . a;} } } const Moduleb={ namespace d : true,state: { b:1},mutations: { },actions : { } const store=new Vuex。Store({ state: { token: 0 },getter s : { getToken(state){ return state . token;},},突变:{ setToken(state,n){ state . token=state . token n;} },actions:{ setToken({commit},n){ commit('setToken ',n) } },modules: { a: moduleA,b: moduleB },})导出默认存储;当在组件中获取模块A的值时,让我们看看geta的状态,getters属性,在vue中,如图所示

Geta是模块a下的getters属性,获取时需要用到。

Computed: {//.mapgetter([' gettoken ']).mapgetter(' a ',['geta'])},mounted(){ console . log(this)console . log(this。如果模块没有命令空间,vuex将

不及物动词摘要

这是我对vuex的基本用法和基本理解。当然,vuex不能仅限于此。这里只列出最简单的。也相当于同时记下来。据说vue3是用ts重写的vue。然后我们会看到vue3发生了什么变化,有什么优点。这篇论文有一些错误,所以很多人提出来了。一起进步。

以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。

版权声明:详细说明vuex状态管理模式是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。