Vuex的使用

最新推荐文章于 2024-09-27 15:27:45 发布

不想努力的迪迪

最新推荐文章于 2024-09-27 15:27:45 发布

阅读量184

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48341937/article/details/131890736

版权

1. 是什么：

vuex 是一个 vue 的状态管理工具，状态就是数据。

大白话：vuex 是一个插件，可以帮我们管理 vue 通用的数据 (多组件共享的数据)

2. 场景：

① 某个状态在很多个组件来使用 (个人信息)

② 多个组件共同维护一份数据 (购物车)

3. 优势：

① 共同维护一份数据，数据集中化管理

② 响应式变化

③ 操作简洁 (vuex提供了一些辅助函数)

核心概念 - state 状态

1. 提供数据：

State 提供唯一的公共数据源，所有共享的数据都要统一放到 Store 中的 State 中存储。

在 state 对象中可以添加我们要共享的数据。

// 创建仓库 
const store = new Vuex.Store({
 // state 状态, 即数据, 类似于vue组件中的data 
 // 区别： 
 // 1. data 是组件自己的数据
 // 2. state 是所有组件共享的数据
 state: { count: 101 }
 })

2. 使用数据：

① 通过 store 直接访问

获取 store：
 (1) this.$store
 (2) import 导入 store

 模板中： {{ $store.state.xxx }}
 组件逻辑中： this.$store.state.xxx 
 JS模块中： store.state.xxx

② 通过辅助函数

mapState是辅助函数，帮助我们把 store中的数据自动映射到组件的计算属性中

{{ count }} 
// 把state中数据，定义在组件内的计算属性中
 computed: { 
  count () {
 return this.$store.state.count 
} },

通过 strict: true 可以开启严格模式

核心概念 - mutations

mutations 用来修改 state 数据。 (state数据的修改只能通过 mutations )

1. 定义 mutations 对象，对象中存放修改 state 的方法

const store = new Vuex.Store({
 state: { count: 0 },
// 定义mutations
 mutations: { 
// 第一个参数是当前store的state属性 
addCount (state) {
 state.count += 1
 } 
} 
})

2. 组件中提交调用 mutations

this.$store.commit('addCount')

提交 mutation 是可以传递参数的 ` this.$store.commit( 'xxx', 参数 ) `

1. 提供 mutation 函数 (带参数 - 提交载荷 payload )

mutations: { ...
 addCount (state, n) {
 state.count += n
 } 
},

2. 页面中提交调用 mutation

this.$store.commit('addCount', 10)

提交参数只能一个，如果有多个参数，包装成一个对象传递

this.$store.commit('addCount', {
 count: 10, ... 
})

辅助函数 - mapMutations

mapMutations 和 mapState很像，它是把位于 mutations中的方法提取了出来，映射到组件methods 中

mutations: { 
subCount (state, n) {
 state.count -= n 
}, 
}

import { mapMutations } from 'vuex' 
methods: { 
...mapMutations(['subCount']) 
}

methods: { 
subCount (n) { 
this.$store.commit('subCount', n) 
},
 }

this.subCount(10) 调用

核心概念 - actions

actions 的基本语法，处理异步操作

mutations 必须是同步的 (便于监测数据变化，记录调试)

mutations: { 
changeCount (state, newCount) { 
state.count = newCount 
}
 }

1. 提供action 方法

actions: { setAsyncCount (context, num) 
{ // 一秒后, 给一个数, 去修改 num 
setTimeout(() => { 
context.commit('changeCount', num) }, 1000) 
} 
}

2. 页面中 dispatch 调用

this.$store.dispatch('setAsyncCount', 200)

辅助函数 - mapActions

mapActions 是把位于 actions中的方法提取了出来，映射到组件methods 中

actions: { 
changeCountAction (context, num) {
 setTimeout(() => { 
context.commit('changeCount', num)
 }, 1000) 
} 
}


import { mapActions } from 'vuex' 
methods: { 
...mapActions(['changeCountAction']) 
}



methods: { 
changeCountAction (n) {
 this.$store.dispatch('changeCountAction', n) 
}, 
}

this.changeCountAction(666) 调用

核心概念 - getters

getters 的基本语法 (类似于计算属性)

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

例如：state中定义了list，为 1-10 的数组，组件中，需要显示所有大于5的数据