关于vuex的使用

1.首先安装vuex

npm install vuex --save

这时如果直接安装vuex，不指定版本的话，就会直接安装最新的vuex的版本。所以会出现报错。

报错就安装这个

npm install --save vuex@3

2.创建文件夹，

有的时候安装好会自动创建vuex的文件夹 ，也就是store文件夹

如果没有该文件夹，就自己创建一个，并且创建一个index.js文件

import Vue from "vue";
import Vuex from "vuex";

// 需要使用插件一次
Vue.use(Vuex)

//    引入小仓库
import goods from "./goods";
import search from "./search";
import user from './user'
// 对外暴露Store类的一个实例
export default new Vuex.Store({
    // 实现Vuex仓库模块式开发存储数据
    modules:{
        goods,
        search,
        user
    }

})

这里为什么会有另外三个文件夹？而且为什么要引入这三个文件？

        因为为了结构清晰，我们把需要用到的数据都分别放，如商品数据就放在goods文件夹下面的

        index.js里面，搜索所需要的数据就放在search下的index.js里面，用户登陆后的信息就放在

        user下的index.js里面，然后再在主文件index.js里面引入这样小仓库，就可以在大仓库里面统

        一管理了

3.创建小仓库

那上面的小仓库里面的数据怎么写呢？

一般的模板为下

// state:仓库储存数据的地方
const state = {
    //state 中的默认初始值别瞎写，服务器返回什么，默认值就为什么
}
// mutations:修改state的唯一手段,只有mutations可以修改state的数据
const mutations = {
}
// actions:处理action,可以书写自己的业务逻辑,也可以处理异步
const actions = {
    // 这里可以书写业务逻辑,但是不能修改直接修改state,要提交mutations,让mutations提交
}
// getters:理解为计算属性,用于简化仓库数据,让组件获取仓库的数据更加方便
const getters = {}

// 对外暴露Store类的一个实例
export default {
    state,
    mutations,
    actions,
    getters
}

我们这里以user下的index.js为例

这里只是写了一下如何在vuex中请求数据接口，当然也可以不写

看清步骤，是先在actions里面获取到异步数据，然后将数据传给mutations，然后mutations再将数据存在state里面

// 引入用户登录接口和获取用户信息接口
import { reqUserLogin, reqUserInfo} from "@/api"

//引入路由，使vuex里面可以实现路由跳转
import router from '@/router/index'
//引入elementUi的提示框模块，为下面的登录成功显示消息提示框
import { Message } from 'element-ui';

// 3.state:仓库储存数据的地方
const state = {
    //state 中的默认初始值别瞎写，服务器返回什么，默认值就为什么
    UserInfo:{}
}
// 2.mutations:修改state的唯一手段,只有mutations可以修改state的数据
const mutations = {
    // 函数
    USERINFO(state,UserInfo){
        // 将数据存入state中
        state.UserInfo = UserInfo
    },  
}
// 1.actions:处理action,可以书写自己的业务逻辑,也可以处理异步
const actions = {
    // 请求用户信息
    async UserInfo({commit}){
        let userInfo =  await reqUserInfo()
        // 将用户信息存入mutations
        commit('USERINFO',userInfo.data)     
    },
    // 这里可以书写业务逻辑,但是不能修改直接修改state,要提交mutations,让mutations提交
    // dispatch是异步操作，commit是同步操作，因为下面需要用到异步操作，这里得把dispatch写进去，第二个参数data为调用接口所需要的参数
    async UserLogin({dispatch},data){
        // 请求接口数据
        await reqUserLogin(data).then( res =>{
            // 接口数据返回成功
            if(res.status == 0){
                // 成功提示
              Message.success(res.message);
            //   将登录成功的token放在session中
              window.sessionStorage.setItem('token',res.token);
            //   登录成功后，跳转到上一个页面（也就是你在哪点的登录，登录成功后，就跳回哪个页面）
              router.go(-1);
            //   我们需要在登录成功后，拿到用户id，然后调用请求用户信息的接口，该接口在上面的userInfo里面请求
            //   因为要使用这个调用接口函数，而且它是异步的，所以就需要用到dispatch，第一个参数为函数名，第二个参数为接口参数
              dispatch('UserInfo',res.userId);
            }else{
                // 数据请求失败提示
              Message.error(res.message);
            }
          });
    },

}
// getters:理解为计算属性,用于简化仓库数据,让组件获取仓库的数据更加方便
const getters = {}

// 对外暴露Store类的一个实例
export default {
    state,
    mutations,
    actions,
    getters
}

4.在main.js里面挂载vuex

 

5.在组件中使用actions异步操作函数

mutations同步函数只需要将dispatch改为commit即可

这里还是以上面的user下的index.js为例

我们可以在任一组件中使用该方法

$store为上面挂载在全局的vuex，dispatch为actions里的异步操作
如果是mutatios里面的同步操作就可以使用commit
第一个参数为异步函数的方法名，第二个参数为函数所需要的参数，也就函数里面接口调用需要的参数
this.$store.dispatch('UserLogin',{username,password})

6.在组件中使用state里面的数据

首先在需要使用的组件里面的script里面引入vuex，并用展开运算符展开它

import {mapState} from 'vuex'
export default {
   computed:{
    ...mapState({
            userInfo:(state) => {  
                //因为把vuex展开了，并且我们使用了user小仓库，
                //这里先使用state然后接user就是使用user里面的state的UserInfo数据         
                let result = state.user.UserInfo
                return result
            }
        })
   }
};

7.防止页面刷新后数据丢失

因为vuex是响应式的，刷新会清空数据，我们为了防止该情况，就把数据存在本地一份

在App.vue里面的created钩子函数里面操作

created() {
    if (sessionStorage.getItem('store')) {
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
    }
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state));
    });
  },