Vue中的状态管理器 - Vuex

Posted codeab

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中的状态管理器 - Vuex相关的知识,希望对你有一定的参考价值。

我们知道vue是组件式开发的,当你的项目越来越大后,每个组件背后的数据也会变得越来越难以理顺,

这个时候你就可以考虑使用vuex了。

备注: 官方建议小项目不要使用,引入vuex会带来新的概念和模式,这对于新手而言理解上本身有难度,而且小项目中vuex发挥的功效确实不怎么明显,

反而增加了开发难度,就像后端项目中常说的 过度设计。

说了这么多,下面介入正题(以下讲解需要一个空的vue项目,推荐使用 vue-cli 创建,快速搭建一个vue开发环境 ):

vuex的作用就是作为一个数据仓库(store),把多个组件的背后的数据都放到store中,然后所有组件通过约定的方式去读取数据和修改数据。

这一句话就概括完了。没有想象的那么复杂。注意,这句话里面一个关键词叫 约定,下面来说说有那些约定:

在将约定之前,首先还是要知道怎么定义一个仓库(store),进入项目然后  vue add vuex 。

通过这条命令,vue-cli 帮我们创建了一个 store.js 的文件,并自动在根组件中引入了store,具体变化如下:

main.js 文件中自动变化了两处

import Vue from ‘vue‘
import App from ‘./App.vue‘    
import store from ‘./store‘ #【引入store文件】

Vue.config.productionTip = false

new Vue({
  store, #【在根组件中引入了store】
  render: h => h(App)
}).$mount(‘#app‘)

现在我们编辑一下 store.js 文件:

import Vue from ‘vue‘
import Vuex from ‘vuex‘
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
      user: {
        name: ‘张三‘, sex: ‘男‘
      }
  },
  mutations: {
    change_name (state,payload) {
      state.user.name = payload.new_name
    },
    change_sex (state,payload) {
      state.user.sex = payload.new_sex
    }
  },
  actions: {
    change_sex_by_action (context,payload) {
      setTimeout(() => {
        context.commit(‘change_sex‘,payload)
      },3000)
    }
  }
})

理解:

  state 是状态(数据中心)。

  mutations 里面定义的函数用来修改state,mutation只能执行同步操作。

  actions 的目的也是更改state,但是他不像mutation一样可以直接更改state,而是通过调用mutation来更改state。还有一个不同点是,action可以执行异步操作,比如网络请求。

  getters 返回组装DIY后的数据,比如state有个sex=“女”,通过getter在后面加一个 生 ,返回 女生,但是我觉得把组件中 computed 干的事情放到store层不是一个好主意,所以本例中不涉及。

用法:

  mutation的一个参数是 state,第二个参数是从 组件传过来的参数对象,

  action的第一个参数是一个与 store 实例具有相同方法和属性的 context 对象,这句话有点难以理解,你就把context想象成一个新的store对象,

  第二个参数还是 组件传过来的参数对象

在编辑一下 App.vue 文件

<template>
  <div id="app">
    <button @click="change_name">change name by mutation</button>
    <p>current name({{ user.name }})</p>
    <button @click="change_sex">change sex by action</button>
    <p>current sex({{ user.sex }})</p>
  </div>
</template>
<script>
export default {
  data () {
    return {
      // user: this.$store.state.user
    }
  },
  computed: {
    user() {
      return this.$store.state.user
    }
  },
  methods: {
    change_name() {
      this.$store.commit({
        type: ‘change_name‘,
        new_name: ‘李四‘
      })
    },
    change_sex() {
      this.$store.dispatch({
        type: ‘change_sex_by_action‘,
        new_sex: ‘女‘
      })
    }
  }
}
</script>

 通过store获取数据都要放到computed里面,虽然在其他地方也可以直接获取,但是无法监听数据变动(就像上面注释的一样)。

change_name是通过mutation方式同步更改store中的数据,change_sex采用了action方式异步更改store中的数据。

如果在computed中需要获取的数据很多,可以使用 官方提供的 mapState,具体用法查看官方 文档 。

我自己的理解:

不要滥用store,不要把所有的数据都放到store中,在组件化开发思想下,我认为组件和组件之间本就应该独立封装,

如果一个数据只有在某个组件中使用,而不需要被其他组件共享,那么最好不要放到其中,store只存储有必要的数据,不要让他变得太臃肿,否则麻烦迟早会来。

官方文档中说明,如果store太大可以采用模块方式分割,但貌似不太优雅,

最后我还是推荐store只放必要的东西,不要让他变得太肥胖。

 

以上是关于Vue中的状态管理器 - Vuex的主要内容,如果未能解决你的问题,请参考以下文章

一文解析Pinia和Vuex,带你全面理解这两个Vue状态管理模式

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

VSCode自定义代码片段13——Vue的状态大管家

手把手教你学vue-4(vuex)

vue状态管理(vuex)