vue2 vuex存储以及数据持久化和模块化

目录

1.创建文件实现vuex模块化

2.安装vuex以及数据持久化命令

3.在创建的user.js中写入以下代码

4.在store文件夹下的index.js中写入以下代码

5.在main.js里面引入注册vuex

6.在（xxx.vue）组件中调vuex方法

首先引入vuex

在methods中调用vuex方法

---

首先我们要搞清楚vuex是什么,干什么用的？

vuex是一个状态管理工具，主要是用来解决中大型项目中数据共享的

为什么要模块化？

让项目代码合理的分配，使其代码更加清晰，方便后期管理

---

1.创建文件实现vuex模块化

在store下创建一个module文件夹进行vuex模块化，然后在其下面创建user.js文件，如下：

2.安装vuex以及数据持久化命令

安装vuex命令 ：npm install vuex

安装持久化命令 ：npm install --save vuex-persistedstate

3.在创建的user.js中写入以下代码

export default {
    // 定义数据
    state: {
        userInfo:''
    },
    // 同步方法
    mutations: {
        setUserInfo(state,val){
            state.userInfo = val
        }
    },
    // 异步方法
    actions: {
        setUserInfoAsync(context,val){
            context.commit('setUserInfo',val)
        }
    },
    // 命名空间 (模块化中必不可少)
    // 命名空间的作用：为了让当前vuex模块里面的状态名和函数名和其他空间的命名不产生冲突
    namespaced: true,
}

4.在store文件夹下的index.js中写入以下代码

// 引入vue
import Vue from 'vue'

// 引入vuex
import Vuex from 'vuex'

// 引入分装出去的模块
import userInfo from './module/user.js'

// 引入vuex持久化插件
import createPersistedState from "vuex-persistedstate";
Vue.use(Vuex)

export default new Vuex.Store({

  // 调用模块化里的数据
  modules: {
    userInfo
  },

  /* vuex数据持久化配置 */
  plugins: [
    createPersistedState({
      // 存储方式：localStorage、sessionStorage、cookies
      storage: window.sessionStorage,
      // 存储的 key 的key值
      key: "store",
      render(state) {
        // 要存储的数据：本项目采用es6扩展运算符的方式存储了state中所有的数据
        return { ...state };
      }
    })
  ]

})

5.在main.js里面引入注册vuex

import Vue from 'vue'
import App from './App.vue'

// 引入vuex
import store from './store'

// 注册vuex
new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

6.在（xxx.vue）组件中调vuex方法

首先引入vuex

import {mapActions} from 'vuex'

在methods中调用vuex方法

methods: {

      // 解构vuex方法
      ...mapActions('userInfo',['setUserInfoAsync']),

      // 点击登录按钮
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            // 调用登录接口
            loginApi({
              account:this.ruleForm.user,
              pwd:this.ruleForm.pass,
              imgcode:this.ruleForm.code
            }).then(res=>{
              // 使用vuex的异步方法存储用户信息
              this.setUserInfoAsync(res.data)
            })
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
    }

注：此案例是一个简单的用户登录案例仅供参考