码迷,mamicode.com
首页 > 其他好文 > 详细

项目实战Vuex

时间:2019-11-12 00:30:15      阅读:116      评论:0      收藏:0      [点我收藏+]

标签:清空   程序开发   action   调用   简单介绍   开发   同步   设置   rod   

首先简单了解一下什么是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

项目实战Vuex

标签:清空   程序开发   action   调用   简单介绍   开发   同步   设置   rod   

原文地址:https://www.cnblogs.com/jing-zhe/p/11839308.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!