使用Store实现登录数据的更新

a1.使用 vue-cli 搭建项目

npm install cnpm -g --registry=https://registry.npm.taobao.org

2.安装 vue-cli ，在命令提示窗口执行：

cnpm install -g vue-cli 

3.用vue-cli来构建项目mystore.如图执行下一步。

vue init webpack mystore

注意：cd mystore才能运行项目！ 

4.新建store目录  以及文件  index.js ,如图

 

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
//设置全局访问的state对象
//要设置的初始属性值
//存储登录名
    username:localStorage.getItem("username"),
//存储其他有关数据
    number:localStorage.getItem("number"),
//存储登录需要用到的请求头token
    Authorization: localStorage.getItem('Authorization')
  },
  mutations: {
//要修改store中的值唯一的方法就是提交mutation来修改
    changeLogin (state, user) {
      state.Authorization = user.Authorization;
      localStorage.setItem('Authorization', user.Authorization);
    },
    setnumber(state,number){
//自定义改变state初始值的方法，这里面的参数除了stae之外还可以再传额外的参数（变量或对象）
      state.number=number
    },
    setusername(state,username){
      state.username=username
    }
  },
  actions: {
//Action 类似于 mutation，不同在于：1.Action 提交的是 mutation，而不是直接变更状态。
//2.Action 可以包含任意异步操作。
    getUser(context, username){
      context.commit('setusername',username)
    },
    getNumber(context, number){
//自定义触发mutations里函数的方法context与store实例具有相同方法和属性
      context.commit('setnumber',number)
    },
  },
  modules: {
  }
  ,getters:{
//实时监听state值的变化（最新状态）
    getusername(state){  //承载变化的对象（username）的值
      return state.username
    },
    getnumber(state){//承载变化的对象（number）的值
      return state.number
    }
  }
})

5. 在main.js中引入impor store from '...'

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/index'
//引入 stroe文件
Vue.config.productionTip = false

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

6.如何在页面中获取 state 里面的 数据呢？

this.$store.state.username

 

7. 调用

this.$store.commit('setusername', _this.usersinfo.username)

 

 8.结果如图