Vuex的基本原理與使用

我們需要知道 vue 是單向數據流的方式驅動的

什么是vuex? 為什么要使用vuex ?

- 多個視圖依賴於同一狀態。
- 來自不同視圖的行為需要變更同一狀態。
 vuex 類似Redux  的狀態管理器, 用來管理Vue的所有組件狀態
 采用集中式存儲管理應用的所有組件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。

狀態機就是保存你的狀態和狀態變化的一個盒子。這里有一些不同種類的狀態機，適用於我們這個案例的是有限狀態機。像它的名字一樣，有限狀態機包含有限的幾種狀態。它接收一個輸入並且基於這個輸入和當前的狀態決定下一個狀態，可能會有多種情況輸出。當狀態機改變了狀態，我們就稱為它過渡到一個新的狀態

每一個 Vuex 應用的核心就是 store（倉庫）。“store”基本上就是一個容器，它包含着你的應用中大部分的狀態 (state)。Vuex 和單純的全局對象有以下兩點不同：

Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，
若 store 中的狀態發生變化，那么相應的組件也會相應地得到高效更新。
你不能直接改變 store 中的狀態。改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。
這樣使得我們可以方便地跟蹤每一個狀態的變化，
從而讓我們能夠實現一些工具幫助我們更好地了解我們的應用。

具體安裝使用

1 下載

2 下載完成之后在src中創建一個 store 文件夾 創建一個store js文件

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

// 讓vue使用vuex工具來實現組件之間的數據共享
Vue.use(Vuex)

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

3 在main.js中 引入store.js 然后注入 store

 

4 定義

/ 存儲數據的對象，我們可以將你需要存儲的數據在這個state中定義
const state = {
  // 當前登陸的用戶名
  username: ''
}
const mutations = {
  // 提供一個方法，為state中的username賦值
//   這些方法有一個默認的參數，這個參數就是當前store中的State
  setUserName (state, username) {
    //存入一個值
    state.username = username
    localStorage.setItem('myname', username)
  },
  getUserName (state) {
    //輸出一個值
    return state.username
  }
}

//使用的時候---> 通過commit調用mutations中定義的函數，這個函數就是操作state中定義的成員的函數
   // this.$store.commit('setUserName', res.data.username(請求返回的值))


const actions = {
  setUserNameAction: ({commit}, username) => {
    commit('setUserName', username)
  },
  getUserNameAction: ({commit}) => {
    commit('getUserName')
  }
}

// 通過action來觸發mutations中的函數，這種觸發方式是異步方式--->使用
//存入  this.$store.dispatch('setUserNameAction', res.data.username + 'aa')
//取出  this.currentUserName = this.$store.dispatch('getUserNameAction')


//Getters是從 store 中的 state 中派生出一些狀態，即當出現多處需要導入某個狀態時，結果不是很理想，所以getters的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算。
const getters = {
  getUserName: (state) => {
    return localStorage.getItem('myname')
  }
}

//使用的時候   直接使用
// <span class="welcome">你好：{{$store.getters.getUserName}}</span>