Vue中的状态管理器 - Vuex

Z时代
2024-01-10
分类：综合

vue

我们知道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 >
    <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>