1. Vuex
Vuex 可以帮助我们管理共享状态，并附带了更多的概念和框架。这需要对短期和长期效益进行权衡。
如果您不打算开发大型单页应用，使用 Vuex 可能是繁琐冗余的。确实是如此——如果您的应用够简单，您最好不要使用 Vuex。一个简单的 store 模式 (opens new window)就足够您所需了。但是，如果您需要构建一个中大型单页应用，您很可能会考虑如何更好地在组件外部管理状态，Vuex 将会成为自然而然的选择。引用 Redux 的作者 Dan Abramov 的话说就是：
Flux 架构就像眼镜：您自会知道什么时候需要它。
尽量用Vuex开发项目，可以让项目更易维护。
1.1. Vuex的核心思想
- state
- mutation
- action
这三个东西组成了Vuex的核心内容
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JaKhWo3k-1626082614487)(./img/vuex.png)]
1.1.1. 流程
- 在组件中使用state中的数据
- 在组件的生命周期或者原生事件中分发（dispatch）对应的action
- action中进行异步请求，请求后台接口获取对应的数据
- 将数据提交（commit）给对应的mutation
- mutation接收到对应的数据后，设置state
- state一旦被修改，自定渲染到使用该state的组件
在mutation中尽可以只做state设置的操作，保证mutation功能的单一性。可以组合提交多个mutation实现功能
1.2. 基本模板
src/store/index.js
const store = new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
getters: {
},
modules: {
}
})
export default store
main.js
...
import store from 'store的路径'
...
new Vue({
store,
...
})
1.3. state
我们应该把组件中的数据存放在state中，组件中需要使用state的位置，去获取对应的state即可
1.3.1. 如何设置state
new Vuex.Store({
state: {
key: "value"
}
})
1.3.2. 如何在组件中使用state
1.3.2.1. 直接使用
直接在组件模板或者组件的js里通过$store.state.key的方式使用
1.3.2.2. 利用computed优化
在computed中定义一个计算数据，建议名字和key的名字相同
{
computed: {
key () {
return this.$store.state.key
}
}
}
1.3.2.3. 辅助函数
…
1.4. mutation
mutation是设置state的唯一方法！！！！！！！！！！！！！
1.4.1. 如何创建mutation
在store的配置里，我们可以创建mutation
new Vuex.Store({
state: {
msg: ""
},
mutations: {
自定义的mutation名字 (state, payload) {
// state是固定写法，用state可以直接修改state 例如 staet.msg = "值"
// payload是参数（载荷） 当我们在提交mutation的时候可以传递参数 commit('mutation', 载荷实际的数据)
state.msg = payload
}
}
})
1.4.2. 如何使用mutation
一种方法，在组件中进行 commit 操作，或者在 action 中进行 commit 操作（这种方式具体见 action的用法章节）
<template>
<div>
<button @click="change">点击修改msg</button>
</div>
</template>
<script>
export default {
methods: {
change () {
this.$store.commit('自定义的mutation名字', "传递的数据")
}
}
}
</script>
mutation中只能进行同步操作！不要出现异步操作！
1.5. action
我们可以在action中进行异步操作
1.5.1. 如何创建action
在store的配置里，我们可以创建action
new Vuex.Store({
state: {
msg: ""
},
mutations: {
setMsg (state, payload) {
// state是固定写法，用state可以直接修改state 例如 staet.msg = "值"
// payload是参数（载荷） 当我们在提交mutation的时候可以传递参数 commit('mutation', 载荷实际的数据)
state.msg = payload
}
},
actions: {
getMsg ({
commit}, payload) {
// 在异步操作前加个return 确保dispatch后执行代码
return axios.get("url").then(res => {
// 将res.data设置给state
commit('setMsg', res.data) // 这里的commit通过解构第一个参数得到。这个参数中包含以下内容： commit dispatch state rootState getters rootGetter
// 这里的state不能修改，只提供获取state中数据的功能
// 在action中也可以dispatch其他的action
dispatch('action', payload)
})
}
}
})
1.5.2. 如何使用action
利用this.$store.dispatch可以实现action的执行
// 在组件的生命周期或者原生事件中，我们可以触发dispatch
this.$store.dispatch("getMsg", "参数")
1.5.2.1. 如何确保dispatch中的异步操作结束后执行代码
this.$store.dispatch('action名字', '参数').then(() => {
// 如果想要让这个函数在异步结束后执行，需要在对应的action将promise对象return出去
})
actions: {
getMsg ({
commit}, payload) {
return axios.get("url").then(res => {
})
}
}