vuex,vuex面试题及答案

vuex的使用

vuex适合用于多组件共享数据的情况，多个组件都能读，也都可以改。

vuex的执行流程：

安装

使用

vuex是一个插件，所以需要Vue.use

注册了vuex，我们就可以在vue里配置store了

getters

这里多了个配置 getters ，他可以看作是基于state的computed属性。使用的方式基本如下：

同时getters还可以配置成函数，方便我们动态传参，满足一些复杂一点的场景

调用

模块化store

随着项目迭代，需求的扩展，你的store会变得越来越臃肿，建议模块化拆分store

以上就是一些对象的拼装，但是模块要放到名为modules的属性内部，store的最终结构大致如下：

模块的命名空间

默认模块的state、getter等属性都会合并到根级别，如果你希望模块有更好的封装性，避免多模块命名污染，可以配置上命名空间属性namespace:true

使用了模块命名空间后，action和getter内部常规用法只能访问本命名空间的dispatch，commit或者getter，如果要访问全局命名空间，需要使用额外的参数和配置：

模块动态注册

在 store 创建之后，你可以使用 $store.registerModule 方法注册模块

如果大多场景下，你的模块化store并不会被使用，只在你的业务流程页面中被用到，这时可以考虑在合适的生命周期节点（比如created）动态注册你的模块。同时要注意先检查模块是否已经被安装： $store.hasModule(moduleName) ，避免重复注册模块，不然会出现逻辑问题。你也可以卸载自己的模块： $store.unregisterModule(moduleName)

官方文档

vuex的五个属性是什么？

Vuex的5个属性：

一、state：

vuex的基本数据,用来存储变量。

二、getter：

从基本数据(state)派生的数据，相当于store的计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

三、mutation：

提交更新数据的方法,必须是同步的(如果需要异步使用action)，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。

四、action：

和mutation的功能大致相同，不同之处在于：

1、Action提交的是 mutation，而不是直接变更状态。

2、Action可以包含任意异步操作。

五、modules：

模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters，使得结构非常清晰，管理更为方便。

属性概述：

属性是一个汉语词汇，拼音是shǔ xìng。意思是人类对于一个对象的抽象方面的刻画。

一个具体事物，总是有许许多多的性质与关系，我们把一个事物的性质与关系，都叫作事物的属性。事物与属性是不可分的，事物都是有属性的事物，属性也都是事物的属性。一个事物与另一个事物的相同或相异，也就是一个事物的属性与另一事物的属性的相同或相异。

由于事物属性的相同或相异，客观世界中就形成了许多不同的事物类。具有相同属性的事物就形成一类，具有不同属性的事物就分别地形成不同的类。

苹果是一类事物，它是由许多具有相同属性的个别事物组成的。梨也是一类事物，它也是由许多具有相同属性的个别事物组成的。苹果和梨是两个不同的类。苹果这个类的共同属性是不同于梨这个类的共同属性的。

vuex的五个属性及使用方法

vuex的五个属性及使用方法具体如下：

VueX是一个专门为Vue.js应用设计的状态管理构架，统一管理和维护各个vue组件的可变化状态(你可以理解成vue组件里的某些data)。

Vuex有五个核心概念：

state,getters,mutations,actions,modules。

1.state：vuex的基本数据，用来存储变量

2.geeter：从基本数据(state)派生的数据，相当于state的计算属性

3.mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation都有一个字符串的事件类型(type)和一个回调函数(handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受state作为第一个参数，提交载荷作为第二个参数。

4.action：和mutation的功能大致相同，不同之处在于==》1.Action提交的是mutation，而不是直接变更状态。2.Action可以包含任意异步操作。

5.modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

vuex的作用？

vuex是一个专门为vue.js应用程序开发的状态管理模式

vuex可以帮助我们管理共享状态，也就是管理全局变量

vuex的几个核心概念：

vuex使用一个store对象管理应用的状态，一个store包括：state,getter，mutation,action四个属性

state:state意为'状态'，是vuex状态管理的数据源

getter:getter的作用与filters有一些相似，可以将state进行过滤后输出

mutation:mutation是vuex中改变state的唯一途径，并且只能同步操作

action:一些对state的异步操作可以放在action中，并通过在action提交mutaion变更状态

module:当store对象过于庞大时，可以根据具体的业务需求分为多个module

我们可以在组件中触发 Action，Action 则会提交 Mutation，Mutaion 会对 State 进行修改，组件再根据 State 、Getter 渲染页面

vuex的基本使用

作用 ：

它采用集中式存储管理应用的所有组件的状态。（统一管理所有组件中公用的数据）

组成：

state：管理所有的状态（数据）

getter：state 的计算属性

mutations：用来操作 state

用法 ：

1.0 定义

// 在 store/index.js 中

export default new Vuex.Store ({state:{userInfo:''}})

2.0 使用

// 在 .vue(组件) 中

// // 取值

this.$store.state.userInfo

// // 赋值

this.$store.state.userInfo={}

总结：

在 vuex 中，如果要给 vuex 中的数据赋值，不能直接得到 state 去赋值，这样不配合 vuex 设计规范

vuex - mapState 基本使用

它是 vuex 中 state 对应的一个辅助函数

mapState：可以用来简化 vuex 中 state 中属性的使用

步骤：

导入

import { mapState } from 'vuex'

定义

computed:{...mapState(["state中的属性名"])}

使用

this.state中的属性名 ===?this.$store.state.state中的属性名

vuex - mutations 的使用

在?vuex?中，如果要给?state?中的属性赋值，建议大家借助?mutation?来赋值

步骤：

1.0 在?mutations?中定义赋值方法

// 在 store/index.js 中

export? default? new? Vuex.Store({

????state: { userInfo: ' ' },

????mutations: { setUserInfo ( state, payload ) {

????????????state.userInfo = payload

????}

}})

2.0 在组件中调用方法

// 在 .vue(组件) 中

?// 取值

this.$store.state.userInfo

?// 赋值

this.$store.commit('setUserInfo', data)

vuex - mapMutaions 基本使用

mapMutaions ： 可能用来简化 vuex 中的 mutations 中方法的调用

步骤：

导入?mapMutations

import { mapMutaions } from 'vuex'

定义方法：

methods:{...mapMutations(['setUserInfo'])}

使用方法：

this.setUserInfo('abc')

总结：

vuex：

state：管理状态

取值：

this.$store.state.xxx

...mapState(['xxx'])? 或者? ...mapState({ myname: 'xxx' })

mutaions

取值：

this.$store.commit('xxx', payload)

...mapMutations(['xxx'])? 或者? ...mapMutations({ myname: 'xxx' })