vuex使用和模块化使用以及解决刷新state为空

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());
    }
  },