VueX五个核心属性分别是state、mutation、action、getter,module

1.state: 用于保存需要全局共享的数据,在组件中访问state里面的数据用this.$store.state.数据名或者用辅助函数

2.mutation: 用于修改 state 里面的数据。每个 mutation都有一个字符串的事件类型和一个回调函数,我们需要改变 state 的值就要在回调函数中改变。我们要执行这个回调函数,那么我们需要执行一个相应的调用方法:store.commit。

3.action: action 可以提交 mutation,在 action 中可以执行 store.commit,而且 action 中可以有任何的异步操作。在页面中如果我们要调用这个 action,则需要执行 store.dispatch

4.getter: 从基本数据(state)派生的数据,相当于state的计算属性,具有返回值的方法

5.module: 模块化vuex,可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰,方便管理
结合实际: 我们做的后管系统,登录请求的写到actions里面,通过mutations将用户信息和token保存到state里面

style上加scoped属性的原理
在 Vue 组件中,为了使样式模块化,不对全局造成污染,可以在style 标签上添加 scoped 属性以表示它的只属于当下的模块,局部有效。
结合实际:我们做的后管系统设置头像图片样式的时候,不加scoped属性就会影响全局样式

Logo

前往低代码交流专区

更多推荐