Vuex项目实战store
2024-09-03 20:30:33
首先简单了解一下什么是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获取
最新文章
- SLF4J: Class path contains multiple SLF4J bindings.
- 解决Django站点admin管理页面样式表(CSS style)丢失
- 欧拉通路-Play on Words 分类: POJ 图论 2015-08-06 19:13 4人阅读 评论(0) 收藏
- 在linux中安装和卸载mysql
- awk用法举例
- text-overflow:ellipsis 的应用(转载)
- poj2909 || poj2262
- wamp的安装使用(转)
- node.js 下依赖Express 实现post 4种方式提交参数
- Python:字符串的分片与索引、字符串的方法
- [ZJOI2015]幻想乡战略游戏
- Linux - 修改Cent OS系统的的hostname、配置DNS映射
- Java是解释型还是编译型语言?
- sql server 性能调优之 资源等待PAGELATCH
- SQL SERVER启动步骤
- Tomcat以Daemon的方式启动(CentOS6&;7)
- C++Primer笔记之复制控制
- Linux 各种软件的安装-tomcat8+JDK篇
- php字符编码转换之gb2312转为utf8(转)
- Jenkins 安装启动提示“iJob for jenkins.service failed because the control process exited with error code. See ";systemctl status jenkins.service"; and ";journalctl -xe"; for details.”