详细说明vuex状态管理模式

一、前言

这一次，我们接受了一个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发生了什么变化，有什么优点。这篇论文有一些错误，所以很多人提出来了。一起进步。

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