25、vuex改變store中數據

以登錄為例：

1、安裝vuex：npm install vuex --save


2、在main.js文件中引入：

import store from '@/store/index.js'
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

 

3、在src文件目錄下新建一個名為store的文件夾，為方便引入並在store文件夾里新建一個index.js,里面的內容如下:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)

 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)
       }

   }

 })

3、在登錄頁面派發事件：

// 同步 this.$store.commit("SET_TOKEN", payload); // payload 為參數

//異步  this.$store.dispatch('SET',payload)

 

4、在其他頁面獲取state中的共享數據：

import { mapState,mapGetters } from "vuex";

computed: {

  ...mapState({

     userName: state => state.userName,

  })

 //  ...mapGetters(["news"])

},

 

在頁面dom中引入：{{userName}}

在methods中調用：this.userName