2五、vuex改變store中數據

以登陸爲例: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

// 同步 this.$store.commit("SET_TOKEN", payload); // payload 爲參數
//異步  this.$store.dispatch('SET',payload)
 
四、在其餘頁面獲取state中的共享數據:
import { mapState,mapGetters } from "vuex";
computed: {
  ...mapState({
     userName: state => state.userName,
  })
 //  ...mapGetters(["news"])
},
 
在頁面dom中引入:{{userName}}
在methods中調用:this.userName
相關文章
相關標籤/搜索