【VUE2】如何在项目中快速的搭建并使用VUEX？

VUEX简介

VUE3中如何搭建VUEX，可以参考我的最新文章：VUE3中使用VUEX的基本文件套路

本文章中介绍的使用环境为vue2.x。官方链接：https://vuex.vuejs.org/zh/guide/

众所周知 Vuex 是什么呢？是用来干嘛的呢？

Vuex 是一个专为 Vue.js 应用程序开发的`状态管理模式`。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

例如：你有几个数据，几个操作，在多个组件上都需要使用，如果每个组件都去调用都是写，就会很麻烦，代码又臭又长。当然 如果没有大量的操作和数据需要在多个组件内使用的话呢，其实也就可以不用这个 Vuex了。看个人吧！

快速使用

安装vuex

npm install vuex --save

建立store文件夹，创建Index.js

首先为了项目格式便于维护和相对规范一点，我们先在 目录下建立一个 store 文件夹，并且在下面建立一个 index.js 文件。

import Vue from "vue";
import Vuex from 'vuex';

import state from "./state";
import * as actions from './actions';
import * as getters from './getters';
import mutations from "./mutations";

import createLogger from 'vuex/dist/logger'

Vue.use(Vuex);

let debug = process.env.NODE_ENV !== 'production';

//创建VueX对象
const store = new Vuex.Store({
  actions,
  state,
  getters,
  mutations,
  // 开启严格模式，线上不使用会有性能损耗 只在开发阶段使用
   // 调试工具，判断state是不是通过mutation去修改的 不是的话就报错
  strict: debug,
  // 使用vuex自带的createLogger plugin，是一个数组，可以有别的plugin
  plugins: debug ? [createLogger()] : []
});

export default store;

创建需要维护属性状态的文件-state.js

//存放的键值对就是所要管理的状态
const state = {
  // 所有资源图片
  resource: [],
  // 主要表单数据
  main: {},
  // 专题发布的状态
  overt: false
};

export default state;

创建定义修改属性操作的名称文件-mutations_types.js

export const SET_RESOURCE = 'SET_RESOURCE';

export const SET_MAIN = 'SET_MAIN';

export const SET_OVERT = 'SET_OVERT';

创建修改state中属性的方法-mutations.js

import * as types from './mutations_types';

const mutations = {
  [types.SET_RESOURCE](state, resource) {
    state.resource = resource;
  },
  [types.SET_MAIN](state, main) {
    state.main = main;
  },
  [types.SET_OVERT](state, ztStatus) {
    state.overt = ztStatus;
  }
};

export default mutations;

创建从vuex中获取属性值的方法文件-getters.js

export const resource = state => state.resource;
export const main = state => state.main;
export const overt = state => state.overt;

创建用于向vuex中存储数据的操作函数文件-actions.js

以我的一个真实项目为例：

import * as types from './mutations_types';

// 由于不能直接修改在vuex中的数据，所以必须要先把原来对象、数组进行深复制
function copyObj(obj) {
  let copy = JSON.parse(JSON.stringify(obj));
  return copy;
}

// 初始化数据 在获取数据后先向vuex中推送
export const initData = function ({ commit }, { resource, main, overt }) {
  commit(types.SET_RESOURCE, resource);
  commit(types.SET_MAIN, main);
  commit(types.SET_OVERT, overt);
};

// 向资源中插入图片资源
export const resourceInsert = function ({ commit, state }, imgUrls) {
  // 注意，这里必须取一个副本，要修改它的状态，必须在mutations中修改
  let resource = state.resource.slice();
  resource.unshift(...imgUrls);
  commit(types.SET_RESOURCE, resource);
};

// 删除资源
export const resourceDelete = function ({ commit, state }, imgUrl) {
  let resource = state.resource.slice();
  // 找到项在数组中的索引
  let delIndex = resource.indexOf(imgUrl);
  resource.splice(delIndex, 1);
  commit(types.SET_RESOURCE, resource);
};

// 对main中的属性进行修改
/* 第二个参数对象使用的时候采用了解构赋值，传的时候也要穿一个对象 */
export const mainBaseUpdate = function ({ commit, state }, { attr, inputVal }) {
  // 对main进行深拷贝，严格模式下，不允许直接修改mutations中的内容
  let main = copyObj(state.main);
  main[attr] = inputVal;
  commit(types.SET_MAIN, main);
};


// 清空所有Imgs
export const mainImgsClear = function ({ commit, state }) {
  let main = copyObj(state.main);
  main.imgs = [];
  commit(types.SET_MAIN, main);
};


export const mainImgsUpdate = function ({ commit, state }, { index, attr, value }) {
  let main = copyObj(state.main);
  // main.imgs[3]['alt'] = ...
  main.imgs[index][attr] = value;
  commit(types.SET_MAIN, main);
};

// 修改专题的发布状态
export const overtUpdate = function ({ commit, state }, overt) {
  // 同时也要修改main中的overt发布状态
  let main = copyObj(state.main);
  main.overt = overt;
  // 提交多个属性的修改
  commit(types.SET_OVERT, overt);
  commit(types.SET_MAIN, main);
};

有几点需要特别注意：

对于vuex中的数据，不能直接修改，必须要进行复制后再修改：

对象的复制

function copyObj(obj) {
  let copy = JSON.parse(JSON.stringify(obj));
  return copy;
}

数组的复制

// 先从vuex中复制数组
let resource = state.resource.slice();
// 向复制的数组中插入
resource.unshift(...imgUrls);
// 将值进行提交到修改mutations中
commit(types.SET_RESOURCE, resource);

执行修改操作

对于像：const mainBaseUpdate =function({ commit, state }, { attr, inputVal }) {....}

这样的进行传参的时候，必须要传一个对象，且属性名要与参数中对应起来，多个参数要放在一个对象中。

this.mainBaseUpdate({
      attr: 'shuxing',
      inputVal: event.target.value
});

commit,state

commit就是提交的意思，修改完属性，要执行提交操作。

state：就是用来获取vuex中的属性对应的值的。

固定操作，牢记即可。

在main.js中注册store

import store from "./store";
new Vue({
  store,
  render: h => h(App),
}).$mount('#app');

在vue组件中使用

获取vuex中的属性

<template>
    <p>{{ main.title }}</p>       
</template>

export default {
  name: "main-form",
  computed: {
    ...mapGetters([
        'main'
    ])
  },
  ...
}

使用...mapGetters这个魔术方法，利用组件的计算属性，将vuex中的值获取到。之后像平常使用计算属性一样，在模板中使用即可。切记，对这些属性，只能get，不能set修改。

修改vuex中属性的值

在methods中使用...mapActions，引入actions.js中的方法。

export default {
  name: "main-form",
  methods: {
    setZtLogo(logo) {
      this.mainBaseUpdate({
        attr: 'zt_logo',
        inputVal: 'www.wubin.work'
      });
    },
    ...mapActions([
      'mainBaseUpdate'
    ])
  }
  ...
}

之后像在组件中定义的方法一样使用即可。切记，修改一切vuex的操作，都要通过actions中的方法进行操作。

在uniapp中使用

在uniapp的Vue2中，使用vuex，需要打印调试功能，那么：

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
//dev 环境打印vuex相关log
//如果vuex版本为3.6.2及以上，则只用Vuex.createLogger
const plugins = process.env.NODE_ENV === 'development'?[Vuex.createLogger()]:[]
//如果vuex版本低于3.6.2,导入createLogger,再使用
// import createLogger from 'vuex/dist/logger.js';
//const plugins = process.env.NODE_ENV === 'development'?[createLogger()]:[]
const store = new Vuex.Store({
  plugins,//添加插件
//...其他内容state,mutations,actions等
});

需要使用Vuex.createLogger() 执行即可。