Code Is Never Die !
如何更好地在组件外部管理状态,Vuex 可以帮助我们管理共享状态,并附带了更多的概念和框架,将会成为自然而然的选择。
今天就简单记录一下最简单的使用Vuex的方法。
一、安装引入
如果是Vue项目搭建的底层,推荐npm/yarn
安装
#npm
npm install vuex --save
#yarn
yarn add vuex
二、结构添加
经过步骤一,成功安装了vuex,下面需要在src目录下新建store/store.js
,当然了,需要在项目中使用,肯定是要引入到main.js中的。以下以登陆成功保存用户名和用户所在用户组为例:
1.以下为基本的main.js设置:
import Vue from 'vue'
import App from './App'
import axios from 'axios'
import router from './router'
import store from './store'
Vue.prototype.$http = axios
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
2.使用vuex保存信息的用户(Login.vue):
this.$store.commit('saveUsername',data.username)
this.$store.commit('saveUsergroup',data.groupname)
3.以下为基本的store.js设置:
// 在store里面的store.js文件写入
import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex);
export default new Vuex.Store({
state:{
// 保存信息的变量名
userName: "",
userGroup: "",
},
mutations:{
// 保存当前用户的信息
saveUsername(state,userName){
state.userName = userName;
},
// 保存当前用户组的信息
saveUsergroup(state,userGroup){
state.userGroup = userGroup;
},
}
})
4.其他模块使用已存储在vuex中的数据:
<p id="name_part">
<span>欢迎您, </span>
// 这里使用用户名
<span class="titleusername" v-html="this.$store.state.userName"></span>
</p>
<p class="other_part">
<span>角色:</span>
// 这里使用用户组
<span class="other_val" v-html="this.$store.state.userGroup"></span>
</p>
这样一个简单的vuex的使用就做好了,在登陆成功时将用户的信息存储在vuex中,在进入其他页面需要用到用户信息的时候可以直接获取。
JavaScript代码是运行在内存当中的,代码运行时的变量,函数,也都是保存在内存中的。刷新页面后,之前申请的所有内存会被释放,重新加载JavaScript代码,变量和函数将重新赋值和初始化。因此,刷新页面保留数据就必须使用外部存储——客户端 or 服务器
这里其实就是说存储在vuex中,当页面刷新后内存被释放,数据也会丢失,所以需要从客户端存储中获取,即Local Storage & Session Storage。具体使用如下:
// 页面重新加载执行
created(){
if (this.$router.path != 'Login') {
//在页面加载时读取localStorage里的状态信息
localStorage.getItem("userThing") && this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(
localStorage.getItem("userThing"))));
//在页面刷新时将vuex里的信息保存到localStorage里
window.addEventListener("beforeunload", () => {
localStorage.setItem("userThing", JSON.stringify(this.$store.state))
})
}
}