本文共 3003 字,大约阅读时间需要 10 分钟。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
就是一个加强版的data! 在单页应用中会有一个data函数,管理当前应用的状态。 处理大量的需要在组件间传递的数据,直接定义一个全局的data属性保存就行了。 如果我们的页面比较简单,切记千万不要没事找事引入Vuex,我们使用Vuex是因为项目变得复杂之后,有很多数据需要在父组件、子组件和孙组件之间传递,处理起来很繁琐,于是就需要Vuex这样一个可以对这一部分数据进行统一管理的东西,也是响应式什么情况需要使用Vuex管理状态在多个组件间共享?
大型项目中组件很多,多个组件中共用的数据 例如:用户的登录状态、用户名称、头像、地理位置信息等 例如:商品的收藏、购物车中的物品。 例如:传递组件之间传递层次太多、不相关组件、公用组件Vuex有点类似cookie和session,session是用于服务器端共享,cookie是用于浏览器的,Vuex是用于前端组件间共享
文件目录
Home
组件
这是在单页模板中应用
{ {count}}
helloword
子组件
{ { msg }}
在子组件hellword中应用Home中的Data
{ {count}}
效果
/store/index.js
import { createStore } from 'vuex'export default createStore({ state: { //任何地方都可使用这个状态管理 num: 0 }, mutations: { }, actions: { }, modules: { }})
Home.vue
使用全局的状态管理
{ {$store.state.num}}
About.vue
This is an about page
{ {$store.state.num}}
效果
index.js
import { createStore } from 'vuex'export default createStore({ state: { //任何地方都可使用这个状态管理 num: 0, mnum: 0 }, mutations: { //自动把state的参数传过来 sub(state) { state.mnum--; }, add(state) { state.mnum++; } }, actions: { }, modules: { }})
Home.vue
这是在单页模板中应用
{ {count}}
使用全局的状态管理
{ {$store.state.num}}
使用Mutations来修改状态
MNum:{ {$store.state.mnum}}
About.vue
This is an about page
Num:{ {$store.state.num}}
MNum:{ {$store.state.mnum}}
效果
index.js
import { createStore } from 'vuex'export default createStore({ state: { //任何地方都可使用这个状态管理 num: 0, mnum: 0 }, mutations: { //自动把state的参数传过来 sub(state) { state.mnum--; }, add(state) { state.mnum++; }, //接收一个参数 sub2(state,count) { console.log(count); state.mnum-=count; }, add2(state,count) { console.log(count); state.mnum+=count; }, //接收多个参数 sub3(state,payload) { console.log(payload); state.mnum-=(payload.count+payload.num); }, add3(state,payload) { console.log(payload); state.mnum+=(payload.count+payload.num); } }, actions: { }, modules: { }})
Home.vue
使用Mutations来修改状态
MNum:{ {$store.state.mnum}}
使用Mutations来修改状态带一个参数
MNum:{ {$store.state.mnum}}
使用Mutations来修改状态带多个参数
MNum:{ {$store.state.mnum}}
效果
转载地址:http://ixuhz.baihongyu.com/