项目实战Vuex

Posted 2020-11-29 jing-zhe

首先简单了解一下什么是Vuex？

Vuex是一个专为Vue.js应用程序开发的状态管理模式。采用集中式存储来管理应用所有组件的状态。

以下是对vuex的使用的简单介绍：

一、安装

　　npm i vuex -S    安装Vuex

　　npm i js-cookie　　安装cookies，Vuex刷新后数据清空需要储存至本地

二、创建仓库，目录：/src/store/store.js

// store/store.js

// store.js就是你的仓库  数据都在这里

import Vue from "vue";

import Vuex from "vuex";

// 储存数据太多时用一个js专门存放封装函数，这里创建一个auth.js

// 这里只是举例setUserinfo，getUserinfo ，用作今天的demo，对应auth.js中的方法

// 为了方便展示这里先直接带入各种数据写进demo中

import { setUserinfo, getUserinfo } from "@/utils/auth";

Vue.use(Vuex);

// 导出

export const store = new Vuex.Store({

  // state 状态，说简单点就是维护的数据

  state: {

    userInfo: getUserinfo() || null

  },

  // getters,对仓库的值进行一定的修正，类似于组件里面的 computed

  // getters，里面的方法默认接收一个参数：当前仓库的状态值

　// 后面通过getter 进行数据获取

  getters: { userInfo: state => state.userInfo },

  // mutations 修改器，用于修改state中的定义的状态变量,同步

  mutations: {

    SET_USERINFO: (state, userInfo) => {

      state.userInfo = userInfo;

      setUserinfo(userInfo);

    }

  },

  // action，存放异步操作，由 action 去触发 mutation

  actions: {

    setUserinfo({ commit }, info) {

      commit("SET_USERINFO", info);

    }

  }

});

三、在main.js全局配置文件内引入Vuex

// main.js
import Vue from "vue";
import App from "./App";
import router from "./router";
import { store } from "./store/store"; // 引入仓库
Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  store,
  components: { App },
  template: "<App/>"
});

四、auth.js，将数据存在cookies

import Cookies from "js-cookie";

export function getUserinfo() {
  return Cookies.get("userinfo");
}

export function setUserinfo(userinfo) {
  return Cookies.set("userinfo", userinfo);
}

这样一套完整的Vuex就已经成型了，接下来就是调用和设置

五、设置state

// 同步，调用store中mutations
this.$store.commit(‘SET_USERINFO‘,{name:‘ZhangSan‘})

// 异步，调用store中actions
this.$store.dispatch(‘setUserinfo‘,{name:‘LiSi‘})

 

六、获取state

　　this.$store.getters.userInfo