VUEX入门简单介绍了解

一时失言乱红尘 2022-01-22 08:19 331阅读 0赞

今天试了一下Vuex,感觉跟Redux的实现思想类似。再此，简单地总结一下。

# 什么是Vuex #

在Vue中，多组件的开发给我们带来了很多的方便，但同时当项目规模变大的时候，多个组件间的数据通信和状态管理就显得难以维护。而Vuex就此应运而生。将状态管理单独拎出来，应用统一的方式进行处理，在后期维护的过程中数据的修改和维护就变得简单而清晰了。Vuex采用和Redux类似的单向数据流的方式来管理数据。用户界面负责触发动作（Action)进而改变对应状态（State），从而反映到视图（View）上。如下图所示：

![1240][]

vuex-flow.png

# 使用Vuex #

安装:

npm install --save vuex

引入：

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

# Vuex的组成部分 #

完整的应用Vuex开发的应用结构应该是这样的：

![1240 1][]

vuex-complete.png

下面针对比较核心的部分进行说明。

## State ##

State负责存储整个应用的状态数据，一般需要在使用的时候在跟节点注入`store`对象，后期就可以使用`this.$store.state`直接获取状态

//store为实例化生成的 
       import store from './store' 
       
       new Vue({ 
       el: '#app', 
       store, 
       render: h => h(App) 
       })

这个store可以理解为一个容器，包含着应用中的state等。实例化生成store的过程是：

const mutations = {...}; 
       const actions = {...}; 
       const state = {...}; 
       
       Vuex.Store({ 
       state, 
       actions, 
       mutation 
       });

后续在组件中使用的过程中，如果想要获取对应的状态你就可以直接使用`this.$store.state`获取，当然，也可以利用`vuex`提供的`mapState`辅助函数将`state`映射到计算属性中去，如

//我是组件 
       import {mapState} from 'vuex' 
       
       export default { 
       computed: mapState({ 
       count: state => state.count 
       }) 
       }

这样直接就可以在组件中直接使用了。

## Mutations ##

`Mutations`的中文意思是“变化”，利用它可以更改状态，本质就是用来处理数据的函数，其接收唯一参数值`state`。`store.commit(mutationName)`是用来触发一个`mutation`的方法。需要记住的是，定义的`mutation`必须是同步函数，否则devtool中的数据将可能出现问题，使状态改变变得难以跟踪。

const mutations = { 
       mutationName( state) { 
       //在这里改变 state 中的数据 
       } 
       }

在组件中触发：

//我是一个组件 
       export default { 
       methods: { 
       handleClick() { 
       this.$store.commit( 'mutationName') 
       } 
       } 
       }

或者使用辅助函数`mapMutations`直接将触发函数映射到`methods`上，这样就能在元素事件绑定上直接使用了。如：

import {mapMutations} from 'vuex' 
       
       //我是一个组件 
       export default { 
       methods: mapMutations([ 
       'mutationName' 
       ]) 
       }

## Actions ##

`Actions`也可以用于改变状态，不过是通过触发`mutation`实现的，重要的是可以包含异步操作。其辅助函数是`mapActions`与`mapMutations`类似，也是绑定在组件的`methods`上的。如果选择直接触发的话，使用`this.$store.dispatch(actionName)`方法。

//定义Actions 
       const actions = { 
       actionName({ commit }) { 
       //dosomething 
       commit( 'mutationName') 
       } 
       }

在组件中使用

import {mapActions} from 'vuex' 
       
       //我是一个组件 
       export default { 
       methods: mapActions([ 
       'actionName', 
       ]) 
       }

## Getters ##

有些状态需要做二次处理，就可以使用`getters`。通过`this.$store.getters.valueName`对派生出来的状态进行访问。或者直接使用辅助函数`mapGetters`将其映射到本地计算属性中去。

const getters = { 
       strLength: state => state.aString.length 
       } 
       //上面的代码根据aString状态派生出了一个strLength状态

在组件中使用

import {mapGetters} from 'vuex' 
       
       //我是一个组件 
       export default { 
       computed: mapGetters([ 
       'strLength' 
       ]) 
       }

## Plugins ##

插件就是一个钩子函数，在初始化`store`的时候引入即可。比较常用的是内置的logger插件，用于作为调试使用。

import createLogger from 'vuex/dist/logger' 
       const store = Vuex.Store({ 
       ... 
       plugins: [createLogger()] 
       })

最后，还有一些高级用法，如严格模式，测试等可能使用频率不会特别高。有需要的时候查官方文档就可以了。总的来说，Vuex还是相对比较简单的，特别是如果之前有学过Flux,Redux之类的话，上手起来更加容易。

# 参考文档 #

[http://vuex.vuejs.org/zh-cn/index.html][http_vuex.vuejs.org_zh-cn_index.html]

[1240]: /images/20220122/04e7421cc1a84647abc6a67e31dd7b79.png
[1240 1]: /images/20220122/11c4c2fea4fa4b519e92aca21fabce25.png
[http_vuex.vuejs.org_zh-cn_index.html]: http://vuex.vuejs.org/zh-cn/index.html