浅谈Vuex

一.vuex简介

VueX是适用于在Vue项目开发时使用的状态管理工具。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

二.开发中遇到的问题

项目中组件传参的方式 ，来同步data的值，确实很方便。如果业务变得的越来越复杂，项目会逐渐变大，组件的管理和代码的维护 工作量 的问题，变得很头疼。面对此问题，Vuex 的使用会将此问题变的越来越轻松。

三.vuex的原理图

image.png

四.安装

1.安装vuex

npm install vuex --save

2.使用

• 在项目根目录下的src文件夹中新建store文件夹，同时新建index.js文件，编写index.js文件如下

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({})
export default store;

• 在src文件夹中的main.js文件中进行修改如下（引入store下的index.js文件，并且将store绑定到全局）

import animate from 'animate.css'
import Vue from 'vue'
import App from './App.vue'
import store from "./store/index"
Vue.config.productionTip = false
Vue.prototype.bus = new Vue();
new Vue({
  store,
  render: h => h(App),
}).$mount('#app')
Vue.use(animate);

五.Vuex中有五种基本对象

• 1.state 存储数据

存储数据和组件的data类似，只不过data是用来存放组件的私有数据，state用来存放组件之间共享的数据.

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {  // 设置全局访问的state对象，记得设置初始值
    tableHead: [],
    tableList: [],
}

计算属性会监控数据变化，一旦发生改变就会响应，所以我们会在组件的computed中获取state的数据

computed： {
    tableHead() {
        return this.$store.state.tableHead
    }
}

• 2.mapstate辅助函数

一个组件需要获取多种状态时，将这些状态都声明会显得很重复，这时候安利大家使用mapstate辅助函数生成计算属性,记得import { mapState } from "vuex"

computed: {
      ...mapState({
        tableHead: state => state.demo.tableHead, 
        tableList: state => state.demo.tableList
      }), 
}

• 3.getters

当我们需要对state的数据进行筛选时可以用到它，可以理解为state的计算属性。一般不常用

• 4.mutations 更改状态，mutation必须是同步函数

在Vuex中，改变状态(state) 的唯一方式是通过提交(commit) 一个mutation。mutations下的函数接收state作为第一个参数，接收payload（载荷）作为第二个参数，载荷是用来记录开发者提交了什么。

mutations: {
    updateTableHead( state, obj ) {  // 自定义改变state初始值的方法，可以传第二个参数（变量或对象）
      state.tableHead = obj;
    },
    updateTableList( state, obj ) {
      state.tableList = obj
    },
}

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用

import { mapMutations } from 'vuex'
export default {
    methods: {
        ...mapMutations([
          'XXX' 
        ])
    }
}

• 5.actions 异步操作

Actions 提交的是 mutations，而不是直接变更状态。也就是说，actions会让mutations帮他提交数据的变更

getTableHeadList({commit}) {
     return demo.getTableHead(). then( res =>     // 调用了接口
          commit('updateTableHead',res.data.Model.headList))//{commit}运用了参数解构来简化代码
}

分发Action是通过store.dispatch触发的

store.dispatch('tableHead')

mutations和actions区别:
mutations：同步

mutations: {
    increment ( state, n ) {
        state.count += n
    }
}
store.commit( 'increment',10)

actions：异步

actions: {
    updateCount ( store, data ) {
        setTimeout(() => {
            store.commit( 'updateCount', data.num )
        }, data.time)
    }
}

this.$store.dispatch( 'updataCount', {
    num: 5,
    time: 2000
})

moudles：由于使用单一状态树，应用的所有状态会集中到一起。当应用变得非常复杂时，store 的代码就有可能变得非常臃肿。为了解决以上问题，我们可以将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割

参考资料->点击跳转

我是乔乔，关注我 一起学前端

我是乔乔，关注我 一起学前端