vuex基礎詳解及項目實例

 

1、概念

Vuex 是一個專為 Vue.js 的SPA單頁組件化應用程序開發的狀態管理模式插件，它包括State（數據源）、Getters（計算屬性）、Modules（模塊）、Mutations（事件）、Action（事件）。Action與Mutation的區別在於Mutation可以更改State，所以當Action要更改狀態時通常是提交到Mutation中更改。

2、安裝

2.1、安裝完vue后就可安裝vuex，本次示例建立在安裝了vue-cli腳手架工具的基礎上。安裝vuex方法為在命令行輸入：

npm install vuex -save-dev

2.2、新建一個store文件夾，里面新建四個js，如圖所示：

 

 其中index.js中包括引入vuex相關代碼，還包括引入mutitions.js、action.js、getters.js，也還包括vuex的state模塊的代。

2.2.1、index.js的代碼：

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as getters from './getters'
import * as mutations from './mutations'

Vue.use(Vuex)
const state = {
  users: '',
  password: ''
}

export default new Vuex.Store({
  state,
  actions,
  getters,
  mutations
})

此處將分為不同js的vuex模塊整合后導出以供此項目使用。引入的包括state、action、mutations。state存儲項目的數據源。

2.2.2、getters.js

export const users = state => state.users
export const password = state => state.password

2.2.3、action.js

export const showUsers = ({ commit }) => commit('showUsers')

export const addUsers = ({ commit }, payload) => {
  commit('addUsers', payload)
}
export const addPassword = ({ commit }, payload) => {
  commit('addPassword', payload)
}

2.2.4、mutations.js

export const addUsers = (state, { users }) => {
  state.users = users
}
export const addPassword = (state, { password }) => {
  state.password = password
}
export const showUsers = state => {
  alert('用戶名為:' + state.users + '密碼為:' + state.password)
}

2.3、然后在main.js中寫入以下代碼：

import store from './store'

然后在vue實例中引入store：

寫入紅色框中的代碼即可。

3、使用

index.vue代碼如下：

<template>
  <div class="">
    <h1>{{ msg }}</h1>
    用戶名：<input type="text" v-model="users" v-on:blur="usersChange(users)">
    密碼：<input type="text" v-model="password" v-on:blur="passwordChange(password)">
    <button type="button"  v-on:click="submit" class="btn btn-default">查看</button>
  </div>
</template>

<script>
  export default {
    name: 'index',
    data () {
      return {
        msg: '設置用戶名和密碼',
        users: '',
        password: ''
      }
    },
    methods: {
      usersChange (users) {
        this.$store.dispatch('addUsers', { users })
      },
      passwordChange (password) {
        this.$store.dispatch('addPassword', { password })
      },
      submit () {
        this.$store.dispatch('showUsers')
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

4、運行結果

點擊查看彈出對話框如下：