Vue中的状态管理器 - Vuex

Posted 2021-02-08 codeab

我们知道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只放必要的东西，不要让他变得太肥胖。