叮咚:
提升自己,比仰望别人更有意义!!!
坚定自己的方向!去开拓打磨另一个自己!!!
此文章只是自己的理解!!!不喜勿喷!喜欢就给个赞哦!!!
希望各位互相监督,共同进步!共同致富!!!
一、 Vuex
1,概念
专门在vue中实现集中式状态数据管理的一个vue插件,对vue应用多个组件的共享状态进行集中式管理,也是一种组件通信的方式,并且适用于任意组件间通信
2,什么时候使用 Vuex?
(1)多个组件依赖于同一状态
(2)来自不同组件的行为需要变更同一状态
3,搭建Vuex的环境
安装vuex的注意事项:
(1)创建store文件
(2)在main.js传入
(3)组件中读取vuex 数据: $store.state.XXX
(4)组件中修改vuex 数据: store.commit('mutation中方法名', 数据)
若没有网络请求或其他业务逻辑,组件中也可以越过过action,直接commit提交
(5)getters 是;当state中的数据需要经过加工后载使用时,可以使用getters加工(相当于计算属性) 读取数据:$store.getters.XXX
4,Vuex 的 Map方法 映射
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、甚至是嵌套子模块。