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}}