//指定允許其他域名訪問
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: GET,POST");
header('Access-Control-Allow-Headers: X-Requested-With,content-type,if-modified-since');

//引入模塊
import ResModule from './../Store/modules/ResModules';
import UsersModule from "./../Store/modules/UsersModule";
const vuex_config = new Vuex.Store({
 modules: {
 res:ResModule,
 users:UsersModule
 }
});

import Vue from "vue";

export default {
 state:{
 currentUser:{
 get UserName(){
 return localStorage.getItem("currentUser_name");
 },
 get UserToken(){
 return localStorage.getItem("currentUser_token");
 }
 }
 },
 mutations:{
 setUser(state,{user_name,user_token}){
 // 在這里把用戶名和token保存起來
 localStorage.setItem("currentUser_name",user_name);
 localStorage.setItem("currentUser_token",user_token);
 }
 },
 actions:{
 userLogin(context,{user_name,user_pass}){
 // 發送get請求做權限認證(真實開發建議用post的方式)
 let url = "http://localhost/yiiserver/web/index.php/token?client_appid="+user_name+"&client_appkey="+user_pass;
 console.log(url);

 Vue.http.get(url)
 .then((res)=>{
 if (res!=null && res.body!=undefined && "access-token" in res.body){
 var token = res.body["access-token"];
 if (token != ""){
 // 后端API驗證通過
 // 調用上面mutations里定義的方法
 context.commit("setUser",{"user_name":user_name,"user_token":token});
 }
 }else{
 alert("用戶名密碼錯誤");
 }
 },(res)=>{
 alert("請求失敗進入這里")
 });
 }
 }
}

 methods:{
 login(){

 // 這個驗證是element-ui框架提供的方法
 this.$refs["users"].validate(function (flag) {
 if(flag){
 /*localStorage.setItem("currentUser",this.UserModel.user_name);
 alert("用戶登錄成功");*/

 this.$store.dispatch("userLogin",{"user_name":this.UserModel.user_name,"user_pass":this.UserModel.user_pass})
 }else{
 alert("用戶名密碼必填");
 }
 }.bind(this));
 }
 }

//引入Module
import ResModule from './../Store/modules/ResModules';
import UsersMoule from "./../Store/modules/UsersModule";
const vuex_config = new Vuex.Store({
 modules: {
 res:ResModule,
 users:UsersMoule
 }
});

<a href="##" rel="external nofollow" >{{this.$store.state.users.currentUser.UserName}}</a>