vuex狀態管理

msvue組件間通訊時，若須要改變多組件間共用狀態的值。經過簡單的組件間傳值就會遇到問題。如：子組件只能接收但改變不了父組件的值。由此，vuex的出現就是用做各組件間的狀態管理。

簡單實例：vuex的使用

1，安裝

cnpm  install  vuex --save

2，文件位置

3,在main.js裏引入store.js

 

4,一個簡單的使用vuex的實例     在子組件中輸入用戶名，密碼。在store.js文件中可以獲取到輸入後的值。 經過   $store.state.nameMsg 能夠在任何組件中獲取到最新的用戶名及密碼。這樣能夠輕鬆實現組件間的通訊

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);
// 首先聲明一個狀態 state
const state = {
  nameMsg: '',
  pwdMsg:''
};
// 而後給 actions 註冊一個事件處理函數，當這個函數被觸發時，將狀態提交到 mutaions中處理
const actions = {
  saveName({commit}, msg) {
    commit('saveMsg', msg)    // 提交到mutations中處理
  },
  savePwd({commit}, msg) {
    commit('savePwdMsg', msg)    // 提交到mutations中處理
  }
};
// 更新狀態
const mutations = {
  saveMsg(state, msg) {
    state.nameMsg = msg;
  },
  savePwdMsg(state,msg){
    state.pwdMsg = msg;
  }
};
// 獲取狀態信息
const getters = {
  showState(state) {
    console.log(state.nameMsg);
    console.log(state.pwdMsg);
  }
};


// 下面這個至關關鍵了，全部模塊，記住是全部，註冊才能使用
export default new Vuex.Store({
  state,
  getters,
  mutations,
  actions
})

 

 登陸    login.vue

<template>
  <div id="login" class="login-content">
    <user></user>
    <enter></enter>
    <p class="content-block"><a @click=showState class="button button-fill button-success">登陸</a></p>
  </div>
</template>
<script>
  // 引入mapGtters，很重要
  import { mapGetters } from 'vuex'
  import enter from '../../components/form.vue'
  import user from '../../components/header.vue'
  export default {
    methods: {
      ...mapGetters([
        // 在store.js 中註冊的getters
        'showState'
      ])
    },
    components: {
      enter,
      user
    }
  }
</script>
<style>
  .login-content {
    margin: 0 auto;
    width: 300px;
    height: 500px;
    border: 1px solid #3db5b5;
  }
</style>

子組件  form.vue

<template>
  <div>
    <input type="text" @blur=saveName(username) v-model="username" placeholder="Your name">
    <input type="text" @blur=savePwd(password) v-model="password" placeholder="Your password">
  </div>
</template>

<script type="text/javascript">
  // 引入mapActions，很重要
  import { mapActions } from 'vuex'
  export default {
    data() {
      return {
        username:'',
        password: ''
      }
    },
    methods: {
      ...mapActions({
        // 在input 的blur 事件中觸發回調，並將輸入值做爲參數返回到store中
        saveName: 'saveName',
        savePwd: 'savePwd'
      })
    }
  }
</script>

子組件   header.vue

<template>
  <div class="header">
    <p>{{$store.state.nameMsg}}</p>
    <p>{{$store.state.pwdMsg}}</p>
  </div>
</template>

<script type="text/javascript">
</script>

<style>
  .header {
    width: 100%;
    height: 50px;
    background-color: #DADADA;
  }
</style>