vue2使用vuex
1.安装
npm install vuex --save
2.main.js中引入
// 引入vuex
import store from './store'
new Vue({
render: h => h(App),
// 挂载
store
}).$mount('#app')
3.新建store文件夹
在这里插入图片描述
store文件目录，modules模块化，将每个模块放在modules中，这里使用user举例子
index.js
import Vue from 'vue';
import Vuex from 'vuex';
import user from './modules/user'
Vue.use(Vuex);
const store = new Vuex.Store({
state: { },
mutations: { },
modules: {
user,
},
});
export default store
user.is
import tologin from '@/request/login' //登陆接口
const user = {
namespaced: true, //开始命名空间。开启和不开启，使用模块方式不同
state: {
userinfo: '',
},
mutations: { //同步
// 登陆 存储用户信息
SET_USERINFO: (state, userinfo) => {
state.userinfo = userinfo
},
},
getters: { //相当于vue中的计算属性computed
gettoken: () => {
return localStorage.getItem('userInfo')
}
},
actions: { //异步，在action中修改mutations
// 登陆
loginIn({ commit }, data) {
return new Promise((resolve, reject) => {
//调用登陆接口
tologin.tologin(data).then(res => {
if (res.data.code == 1) {
// 存储用户信息
localStorage.setItem('userInfo', JSON.stringify(res.data.data));
//存储信息在state中
commit('SET_USERINFO', res.data.data)
}
resolve(res)
}).catch(err => {
reject(err)
})
})
},
}
}
export default user
开启命名空间
使用action
在使用的页面里
//要加上模块名称name
this.$store.dispatch("user/loginIn", this.logininfo).then((res) => {
console.log(res)
})
使用getters
import { mapGetters } from "vuex";
computed: {
...mapGetters({ gettoken: "user/gettoken" }),
...mapGetters({ gettoken: "user/gettoken",getuser: "user/getuser" }), //多个使用
},
//页面中直接使用
<div>
{{ gettoken }}
</div>
未开启命名空间（ namespaced: true删掉即可）
使用action
//删除模块名称即可
this.$store.dispatch("loginIn", this.logininfo).then((res) => {
console.log(res)
})
使用state
computed: {
getu() {
return this.$store.state.user.use.basic_info || "";
},
},
//页面中直接使用
<div>
{{ getu.nickname}}
</div>
使用state 和 mutation也是同样的道理，开启命名空间就要加上对应模块名称
4.解决vuex刷新state数据为空
在APP.vue中
methods: { //写一个函数来调用stare中的方法，进行赋值
getuse() {
//方法一
this.$store.dispatch("user/getUserinfo"); //调用stare中的方法
//方法二
this.$store.commit("user/GET_USERINFO", localStorage.getItem("getuse")); //或者进行赋值
},
},
mounted() { //在mounted中调用这个方法
//一般还要判断一下是否登陆了，登陆的话刷新在赋值，否则没登陆刷新会报错，具体情况看接口是否需要登陆
if (this.$Local.get("getuse")) {
window.addEventListener("unload", this.getuse());
}
},
