vue笔记——后台数据存储

1：sessionStorage

localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据。

sessionStorage 用于临时保存同一窗口(或标签页)的数据，在关闭窗口或标签页之后将会删除这些数据。

范例：存储数据（表单中提交的数据）

sessionStorage['username'] = this.loginForm.loginName;    
取出数据
sessionStorage['username']

完整代码

<script>
  import {mapState} from 'vuex'

  export default {
    name: 'login',
    data () {
      return {
        loginForm: {
          loginName: '',
          loginPassword: ''
        },
        // 表单验证，需要在 el-form-item 元素中增加 prop 属性
        loginFormRules: {
          loginName: [
            {required: true, message: '账号不可为空', trigger: 'blur'}
          ],
          loginPassword: [
            {required: true, message: '密码不可为空', trigger: 'blur'}
          ]
        }
      }
    },
    created () {
      /*键盘事件*/
      var lett = this
      document.onkeydown = function (e) {
        var key = window.event.keyCode
        if (key == 13) {
          lett.login()
        }
      }
    },
    methods: {
      login () {
        this.axios.post('user/login', {
          userName: this.loginForm.loginName,
          password: this.loginForm.loginPassword
        }).then(res => {
          console.log(res.data.userName)
          sessionStorage['username'] = this.loginForm.loginName;   
          /*alert(sessionStorage['username'])   获取sessionStorage的值 */
          this.$router.replace('/index/welcome')
        }).catch(error => {
          alert('账号或密码错误')
          console.log(error)
        })
      },
      onRegit () {
        this.$router.push({path: '/registered'})
      }
    }
  }
</script>

2：使用vueX

 /*alert('登陆成功');*/
 this.$store.commit('handleUserName', res.data.userName)  /*存至vuex  主页展示用户*/
-------------------------------------------------------------
store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const actions = {}
const mutations = {
  handleUserName: (state, user_name) => {
    state.userName = user_name
    // 把登录的用户的名保存到localStorage中，防止页面刷新，导致vuex重新启动，用户名就成为初始值（初始值为空）的情况
    localStorage.setItem('user_name', user_name)
  }
}
const state = {
  userName: '' || localStorage.getItem('user_name')
}
// getters 只会依赖 state 中的成员去更新
const getters = {
  userName: (state) => state.userName
}

const store = new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})
export default store;

------------------------------------------------
main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import axios from 'axios';   /*使用axios*/
import store from './store/store.js'

Vue.use(ElementUI)
Vue.config.productionTip = false
Vue.prototype.axios= axios
axios.defaults.baseURL ='/api/'; //配置请求地址


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store: store,
  components: { App },
  template: '<App/>'
})

----------------------------------------------
取出数据

{{$store.getters.userName}}