什么是vuex

在大项目中使用vuex,解决了组件之间统一状态的共享问题，实现组件之间的数据持久化。在项目中可以用vuex存放数据，不用每次都要请求后端服务器，这就在保证了数据新鲜度的同时提高了使用性能。

vuex，你也可以理解为一个存放全局变量的仓库。在这里可以存放一些各个模块中通用的变量和属性。

vuex持久化的作用

为了再刷新的时候，保持我们的登录状态，以及一些重要的文件，我们需要存储一些东西在缓存里面；
而当我们开发的时候，不知道什么时候缓存什么值，就会导致各种小bug，一刷新，找不到了；

下面上代码

首先我们先拆分以下模块，方便重复调用，我们把vue中store文件拆出来放到一个新的文件中
文档结构

export default ({
  // 自定义一个要获取的数值/数据
  state: {
    user: ""
  },
  // 自定义一个获取数值的方法
  mutations: {
    getuser(state, val) {
      state.user = val
    }
  },
  actions: {
    // 这里是做的一个异步操作
    getuserAsync({ commit }, val) {
      commit('getuser', val)
    }
  },
  // 这里写入namespaced开启命名空间 当页面越来越多 越来越臃肿
  // vuex模块拆分后 命名空间尤为重要！
  namespaced: true,
})

store文件引入查分的模块

import Vue from 'vue'
import Vuex from 'vuex'
// 引入持久化
import createPersistedState from "vuex-persistedstate"
// 引入拆分的模块
import vux from "./module/index.js"
Vue.use(Vuex)

export default new Vuex.Store({
  // 引入
  modules: {
    vux
  },
  // 持久化操作
  plugins: [createPersistedState({
    storage: window.sessionStorage
  })]
})

命名空间网址：blog.csdn.net/lzb34811017…
持久化操作网址：juejin.cn/post/684490…

下面我们就可以做一个简单的登录操作

• 引入vuex中定义的 state 以及 actions 异步

<template>
  <div id="app">
    <input type="text" v-model="username">
    <input type="text" v-model="pwd">
    <button @click="loginfn">登录</button>
    <router-view/>
  </div>
</template>

<script>
//引入vuex
import {mapState,mapActions} from "vuex"
export default {
  data() {
    return {
      username:"",
      pwd:""
    }
  },
  methods: {
    // 如果更改的是Actions数据 需要在methods中进行扩展使用
    //getuserAsync 我们定义的异步操作方法
    ...mapActions("vux",["getuserAsync"]),
    loginfn(){
      this.getuserAsync(this.username)
      this.$router.push("/")
    }
  },

}
</script>

• 我们需要存数据的页面

<template>
  <div class="home">
    <p>{{ user }}</p>
  </div>
</template>

<script>
//引入vuex
import { mapState, mapActions } from "vuex";
export default {
  data() {
    return {};
  },
  // 使用vuex中state数据 需要在计算属性中
  // 运用扩展符进行扩展
  computed: {
    ...mapState("vux", ["user"]),
  },
};
</script>

这样我们就完成了vuex的存储和持久化