以登陸爲例:vue
一、安裝vuex:npm install vuex --save
vuex
二、在main.js文件中引入:npm
import store from '@/store/index.js'
new Vue({ router, store, render: h => h(App) }).$mount('#app')
三、在src文件目錄下新建一個名爲store的文件夾,爲方便引入並在store文件夾裏新建一個index.js,裏面的內容以下:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)app
export default new Vuex.Store({ state: { Token: '',
userName:'' },
//假設須要在state.userName基礎上派生出一個新的狀態newUserName出來,就適合使用getters
getters:{ newUserName:state => 「Hello」+state.userName}
//同步方法 mutations: { SET_TOKEN(state, params) { // console.log(params.Token, params.userNo); state.Token = params.Token;
state.userName=params.userName;
}
},
// 異步方法
actions:{
SET(context,Object) {
//處理異步操做
context.commit('SET_TOKEN',Object)
}dom
}異步
})
三、在登陸頁面派發事件:this
import { mapState,mapGetters } from "vuex";