Vue.observable状态管理 - 易学教程，面试笔记经验！

在Vue中可以使用vuex实现多个页面的数据共享，不过对于项目不是太大的话vuex建议使用Vue.observable实现多个页面的数据共享。

在vue2.6版本版本中新增Vue.observable()函数，它可以实现一些简单的跨组件数据共享的功能。

这里以用户登录并跳转到用户中心为背景说明Vue.observable()的用法。其中

在登录页面获取用户信息，并放到Vue.observable生成的变量中；

在跳转到的用户中心页面，在Vue.observable生成的变量中获取用户信息并展示。

例子：

1. 创建/src/store/index.js文件，其中它的代码如下：

import Vue from "vue"

export const storeInfo = Vue.observable({
    user: {
        username:'',
        gender: '',
        mobile: ''
    }
})

这里可以定义多个共享变量。

2. 创建登录页面/src/views/user/login.vue

<template>
  <div >
    用户名:<input type="text" v-model="username" placeholder="请输入用户名" />
    <br><br>
    密码:<input type="password" v-model="password" placeholder="请输入密码" />
    <br><br>
    <button @click="login()">登录</button>
  </div>
</template>

<script>
import { storeInfo } from '@/store/index'

export default {
  name: "LoginIndex",
  data() {
    return {
      username: "",
      password: "",

    }
  },
  methods: {
    login: function() {
      //这里省略ajax登录请求，直接获取参数
      const userInfo = {
        username: '张三',
        gender: '男',
        mobile: '139222222'
      }
      storeInfo.user = userInfo
      //跳转到新页面
      this.$router.push({ path: '/home'});
    }
  }
}
</script>

<style scoped>

</style>

为了方便，这里省略ajax登录请求，直接给storeInfo.user赋值。

3. 创建用户中心页面/src/views/home/index.vue

<template>
  <div>
    <h2>用户首页</h2>
    <div>用户名：{{ user.username }}</div>
    <div>性别：{{ user.mobile }}</div>
    <div>手机号：{{ user.gender }}</div>

  </div>
</template>

<script>
import { storeInfo } from '@/store/index'

export default {
  name: "HomeIndex.vue",
  data() {
    return {
      user: {
        username: "",
        mobile: "",
        gender: "",
      },
    }
  },
  created: function(){
    this.user = storeInfo.user
  },
  methods: {

  }
}
</script>

<style scoped>

</style>

4. 定义路由，请参考 Vue添加路由vue-router并创建页面

5. 最后运行我们的项目，访问登录页面，http://localhost:8080/#/login 并点击跳转看到的结果如下：

Vue.observable状态管理