什么是vuex？如何使用vuex？

• 1. Vuex
  • 1.1. Vuex的核心思想
    • 1.1.1. 流程
  • 1.2. 基本模板
  • 1.3. state
    • 1.3.1. 如何设置state
    • 1.3.2. 如何在组件中使用state
      • 1.3.2.1. 直接使用
      • 1.3.2.2. 利用computed优化
      • 1.3.2.3. 辅助函数
  • 1.4. mutation
    • 1.4.1. 如何创建mutation
    • 1.4.2. 如何使用mutation
  • 1.5. action
    • 1.5.1. 如何创建action
    • 1.5.2. 如何使用action
      • 1.5.2.1. 如何确保dispatch中的异步操作结束后执行代码

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. 流程

1. 在组件中使用state中的数据
2. 在组件的生命周期或者原生事件中分发（dispatch）对应的action
3. action中进行异步请求，请求后台接口获取对应的数据
4. 将数据提交（commit）给对应的mutation
5. mutation接收到对应的数据后，设置state
6. 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">点击修改msgbutton>
  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 => {})
  }
}