Vuex项目实战store

首先简单了解一下什么是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.state.userInfo　　//  直接获取

　　this.$store.getters.userInfo　　// 通过getters获取