uni-app 使用Vuex+ （強制）登陸

1、在項目的根目錄下新建一個store文件夾，而後在文件夾下新建一個index.js文件

2、在新建的index.js下引入vue和vuex，具體以下：

//引入vue和vuex
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({//全局變量定義
    state: {
        forcedLogin: false,//是否須要強制登陸
        hasLogin: false,
        userName: "",
        userId:'',
        token:'',
        pointId:'',
    },
    mutations: {
        login(state, user) {
            state.userName = user.username || '';
            state.hasLogin = true;
            state.userId = user.id || '';
            state.token = user.token || '';
            state.pointId = user.pointId || '';
        },
        logout(state) {
           state.userName = "";
           state.hasLogin = false;
           state.userId = '';
           state.token = '';
           state.pointId = '';
        }
    }
})
export default store

3、在main.js中註冊

想要定義的這個 js 文件中的變量和方法能在各個頁面使用並生效，須要先在項目目錄下的  main.js  文件中導入這個  js  文件並聲明方法，以下圖所示：

4、在 pages/index/index.vue 使用

一、先在頁面導入vuex的方法

二、而後，在 computed 計算屬性方法中使用  mapState 對全局變量進行監控。

三、一進來index.vue 頁面，在onload（）頁面加載的時候，判斷是否已經是登錄狀態，不是的話，彈出對話框，提示進行‘登錄操做’

 

 5、登錄頁面

一、先在頁面導入vuex的方法，以下：

二、在 computed 計算屬性方法中使用  mapState 對全局變量進行監控，在 method中使用  mapMutations  進行全局方法監控，以下所示：

三、網絡請求成功後，在回調函數 success 中調用該方法，並把回調函數的返回值數據傳給 login 方法

四、隨後 store/ index.js  文件中的login方法會把傳過來的用戶數據保存在vuex。

5、擴展

在vue文件中使用   取值，好比其中的token，可使用‘this.$store.state.token’這樣來取。

在js文件中使用 

一、import store from '../../store' 先引用

二、store.state.token  取值 

vuex 中的 store 和 $store 的區別

$store 是掛載在 Vue 實例上的（即Vue.prototype），而組件也實際上是一個Vue實例，在組件中可以使用 this 訪問原型上的屬性，template 擁有組件實例的上下文，可直接經過  this.$store.state.token。
store.state.token ， 需聲明過 store 纔可訪問。