VUEX保姆级教程以及概念讲解+面试题

什么是Vuex?

是基于vue项目 状态（数据）管理的库, 可以实现 集中管理 组件数据。

vuex的优点

• 它是独立于组件而单独存在的，所有的组件都可以把它当作  一座桥梁 来进行通讯。
• 响应式： 只要仓库一变化，其他所有地方都更新 （太爽了！！！）

什么数据适合存到vuex中

一般情况下，只有  多个组件均需要共享的数据 ，才有必要存储在vuex中。

vuex解决什么问题? 

 vuex 能解决  多组件共享数据  的问题,  非常方便便捷

Vuex 使用基本步骤（5）

• 装包

yarn add vuex@3.4.0

• 引包

import Vuex from 'vuex'

• 注册Vuex

Vue.use(Vuex)

• 实例化Vuex

const store = new Vuex.Store({})

• 注入到Vue实例上

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

Vuex 核心概念

state

作用：用于存放数据的

在任意组件内使用state的值

• this.$store.state.属性名 ===> 结合计算属性 简化写法 
• mapState ===> Vuex 提供的辅助函数 mapState===> 简化写法

mapState

mapState： 快速导入state里的属性

• 导入 mapState

import {mapState} from 'vuex

• mapState(['count', 'count1']) 导入在组件的计算属性

computed: {
  ...mapState(['name1'])
}

mutations

Vuex里 推荐 唯一可以改变 state里数据的途径 ===> 而且我们也必须遵循

mutation 类似于事件：每个 mutation 事件类型 (事件名称) 和 一个 回调函数 (事件处理函数)

mutation 的触发 ===> this.$store.commit('事件类型')

mutations: {
  mutation名称(state, playload) {
    
  }
}

带参数的 mutation

this.$store.commit('mutation名称', 实参)

subCount(state, 形参) {
	state.count--
}

提交的参数只能是一个, 如果有多个参数要传, 可以传递一个对象

mapMutations

mapMutations： 快速导入mutation

• 先倒入 import {mapMutations} from 'vuex'

import {mapMutations} from 'vuex'
// 在组件内可以利用 mapMutations 快速将具体的 mutation 导入到 methods

  methods: {
    ...mapMutations(['upName'])
  },

mutation 只可以执行同步的代码

actions

可以 负责进行异步操作

actions: {
	asyncA(context, playload) {
    // context==> {commit, dispatch, state, rootState, rootGetters}
  }
}

触发 dispatch('action名称'， 实参数)

定义的时候 申明形参 接收 实际参数 

mapActions

mapActions： 快速导入action

import {mapActions} from 'vuex'
// 在组件内可以利用 mapActions 快速将具体的 action 导入到 methods

  methods: {
    ...mapActions(['upName'])
  },

getters

理解成 vuex 计算属性

组件内使用 getter this.$store.getters.XXXX

mapGetters： 快速导入getter

mapGetters 先倒入 import {mapGetters} from 'vuex' 

import {mapGetters} from 'vuex' 


computed: {
  ...mapGetters(['name1'])
}

modules

通过 modules 实现模块化

  // modules 实现模块化
  modules: {
    // key:value
    //key模块的名称：value 模块对象
    userName: User // import 
  }

默认情况下，模块内部的 action、mutation 和 getter 是注册在全局命名空间的， 可以通过开启命名空间（namespaced） 解决这个问题。

vuex可以利用 modules, 将 store 划分成 各个模块， 每个模块拥有自己的 state、mutation、action、getter。

模块内的 mutation、action、getter 默认是注册在全局的，可以通过 namespaced 开启命名空间，保持模块高封闭性。

辅助函数 mapMutations/mapGetters/mapActions 都可以 访问 模块内的数据，只是要加上模块名称

mapMutations('模块内名称', ['Mutation名称'])

this.$store.commit('模块内名称/Mutation名称')

this.$store.getters['模块内名称/getter名称']

Vuex 数据持久化

vuex数据不是持久化存储的，每次应用刷新数据都会重置，可以借助 vuex-persistedstate 实现。

小结

vuex是什么?

• vuex 是基于vue状态（数据）管理的库

vuex的5个属性

• state: 存储或定义共享数据,如果像访问数据,$store\mapState 
• mutations: 修改vuex数据的唯一方式, 只可以写同步的代码, commit提交mutaiotn，辅助函数 mapMutaiotn 
• actions: 处理异步或 提交多个mutaiotn  ,vuex 通过 dispatch 触发action , 辅助函数 mapAction 
• getters: 快捷访问 state里的数据 或者  基于state进行派生数据， 辅助函数 mapGetter 
• moudles: 

• • vuex可以用过moudles将数据进行模块化,方便维护,划分模块,
  • 每个模块中都拥有state/actions/mutaions/getters,
  • 每个模块可以设置命名空间 namespaced

vuex缺点？？

实际vuex也是有缺陷的,不能持久化

• 利用插件实现自动存储vuex-persistedstate

在项目里是如何使用Vuex??

• vuex相关的代码是维护在src/store文件夹下
• 我们的项目里vuex 采用模块化的形式来管理数据，做开发的
• 通过 new Vuex.Store() 来new一个 vuex实例，挂载到Vue实例身上
• 可以把上述的点也补从进来