Vuex

50 阅读2分钟

叮咚:

提升自己,比仰望别人更有意义!!!
坚定自己的方向!去开拓打磨另一个自己!!!

此文章只是自己的理解!!!不喜勿喷!喜欢就给个赞哦!!!

希望各位互相监督,共同进步!共同致富!!!

一、 Vuex

1,概念

专门在vue中实现集中式状态数据管理的一个vue插件,对vue应用多个组件的共享状态进行集中式管理,也是一种组件通信的方式,并且适用于任意组件间通信

2,什么时候使用 Vuex?

(1)多个组件依赖于同一状态

(2)来自不同组件的行为需要变更同一状态

3,搭建Vuex的环境

安装vuex的注意事项:

Snipaste_2023-03-13_10-45-55.png

(1)创建store文件

Snipaste_2023-03-13_14-15-15.png

(2)在main.js传入

Snipaste_2023-03-13_14-15-33.png

(3)组件中读取vuex 数据: $store.state.XXX

(4)组件中修改vuex 数据: store.dispatch(action中方法,数据)store.dispatch('action中方法名', 数据) 或 store.commit('mutation中方法名', 数据)

若没有网络请求或其他业务逻辑,组件中也可以越过过action,直接commit提交

(5)getters 是;当state中的数据需要经过加工后载使用时,可以使用getters加工(相当于计算属性) 读取数据:$store.getters.XXX

4,Vuex 的 Map方法 映射

Snipaste_2023-03-13_16-18-28.png

Snipaste_2023-03-13_16-28-28.png

5,Vuex模块化

更新中。。。。

Vuex 面试题

1,什么是Vuex?

Vuex是官方提供的一个插件,状态管理库,集中式管理项目中组件共用的数据。

2,什么情况下使用Vuex?

如果项目比较小,完全不需要vuex, 如果项目很大,组件很多数据很多,数据维护很费劲,就可以使用vuex

3,vuex 核心属性

state

mutations

actions

getters

modules

4,vuex基本使用?

1-在src下新建文件夹store/index.js

2-在这个文件引入vue vuex

import Vue from 'vue'

import Vuex from 'vuex'


3-注册vuex

Vue.use(Vuex)

4-配置

//state仓库用于存储数据
const state ={},

//mutations 修改statu的唯一手段
const mutations = {},

//actions 可以书写自己的业务逻辑或处理异步
const actions =  {},

//getters 理解为计算属性,用于简化仓库数据,让组件获取仓库数据更加方便
const getters = {},

//对外暴露store 实例

export default new Vuex.Store({

  state,
  mutations,
  actions,
  getters
  
  })
  
  
  
  5-在main.js 中引入挂载
  import store from '@/store'
  
  new Vue({
    render: h => h(App),
    router,
  `  store`
 }).$mount('#app')
 
 
 

8

由于使用单一状态树,应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时,store 对象就有可能变得相当臃肿。为了解决以上问题,Vuex 允许我们将 store 分割成模块(module)。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块。