Vuex的基本入門、使用場景及安裝配置

什麼是Vuex?

用2句話歸納：

1. 主要應用於Vue.js中管理數據狀態的一個庫
2. 經過建立一個集中的數據存儲，供程序中全部組件訪問

固然這麼說確定仍是有所不懂，這裏我就用單一使用vue.js和使用vuex.js場景的不一樣進行對比講解

---

單一使用Vue.js的場景

在單一使用vue.js的場景中，咱們不免要在不一樣的組件中互相傳值。在該場景中，由一個根組件，兩個父組件再各自擁有一個子組件，咱們若是使用prop的屬性傳值，在這個詳情組件須要使用添加組件中的某個值時，咱們須要不停的觸發某個事件將這個值一層一層一層一層地沿着這個路徑傳過去，這樣能實現將值傳遞給詳情組件，但這是至關的麻煩（鬼知道我當初不知道vuex爲了傳值頭有多大）。如今讓咱們看下vuex.js場景下的效果

使用Vuex.js的場景

咱們將使用專門的store存儲全部的數據，若是咱們須要取到組件二或更深一級的子組件的某個數據咱們能夠直接使用getter方法直接拿到其中的數據。若是咱們須要向store中添加或更改某個數據，咱們能夠用mutation或直接$store.state的形式直接跨過父組件向store中直接添加或更改數據。就比如一個倉庫，全部人能直接跨過上級拿到倉庫中的某個你所須要的東西，這無疑是在咱們使用vue開發項目時，至關省時省力的辦法。

Vuex的使用場景

• 涉及到非父子關係的組件，例如兄弟關係、祖孫關係，甚至更遠的關係組件之間的聯繫
• 中大型單頁應用，考慮如何更好地在組件外部管理狀態

相信你們在看完上面vuex的基本介紹後，內心對它使用場景也有了一個大概的想法。
總而言之，在頁面數據結構比較複雜，數據和組件分離，分別處理，組件量較大的狀況下，那麼使用 Vuex 是很是合適的。

Vuex的安裝配置

在使用vue-cli腳手架建立項目後

npm install vuex

進入項目安裝vuex,安裝完成後，在項目的文件夾src中再新建一個文件夾store,文件夾中新建文件store.js(命名爲本人習慣)。

store.js

//引入vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'

//引入以後，對vuex進行引用
Vue.use(Vuex)

main.js

import {store} from './store/store'

new Vue({
  store:store,//使用store
  el: '#app',
  router,
  components: { App },
  template: '<App/>',
  
})

在main.js 中引入vuex文件

到此爲止，vuex的引入就算是成功了。

基本概念

State

如今回到咱們的store.js中

//建立且聲明一個對象
export const store = new Vuex.Store({
    state:{
        isShow:true,
        items:[
        {
            name:"張三",
            num:"1"
        },
        {
            name:"李四",
            num:"2"
        },
        {
            name:"王五",
            num:"3"
        }
        ]
    }
})

這裏不一樣於文檔中的寫法，我這裏直接將建立聲明簡寫成一段代碼（我的更偏好這樣寫）。在state中填寫外部組件須要的數據。外部組件中調取數據：

computed:{
        itemList(){
            return this.$store.state.items
        }
    },

//這裏有兩種辦法
//p在computed的itemList方法中循環
<p v-for="item in itemList">{{item.num}}{{item.name}}</p>

//p直接指向store中的state的items數組
<p v-for="item in this.$store.state.items">{{item.num}}{{item.name}}</p>

能夠經過computed中的方法獲取數據，也能夠直接使用this.$store.state。

Getters

getters乍一看也是獲取數據，可是在獲取以前它多了一個步驟：計算過濾獲取的數據並返回過濾完成後的數據。若是多個組件須要用到篩選後的數據，那咱們就必須處處重複寫該計算屬性函數；或者將其提取到一個公共的工具函數中，並將公共函數多處導入。
store.js

getters:{
        numChange(state){
            return state.items.forEach(item=>{
                item.num+=100
            })
        }
    }

組件中：

//寫法一：
<p v-for="item in this.$store.getters.numChange">{{item.num}}{{item.name}}</p>

//寫法二：
<button @click="numTurn">改變數字</button>

computed:{
        numChange(){
            return this.$store.getters.numChange
        }
    },

p標籤在computed中返回getters數據的中循環，數據顯示出來便直接是計算完成後的數據

Mutations

咱們可使用mutations配合vuex提供的commit方法來修改state中的狀態

store.js

export const store = new Vuex.Store({
    state:{
        isShow:false,
        myData:'',
        items:[
            {
                name:"張三",
                num:1
            },
            {
                name:"李四",
                num:2
            },
            {
                name:"王五",
                num:3
            }
            ]
    },
    mutations:{
        //定義一個函數動態修改state的狀態值
        numTurn(state){ /這裏的state表明上面的State
            state.items.forEach(item=>{
                item.num+=100
            })
        }
    }
})

組件中：

//寫法一：
<button @click="$store.commit('numTurn')">改變數字</button>

//寫法二：
<button @click="numTurn">改變數字</button>

methods:{
        numTurn(){
            this.$store.commit('numTurn')
        }
    }

兩種寫法原理是同樣的，都能實現效果。注意：mutations中的方法須要commit配合回調實現，而再也不是$store.mutation,且mutations只能處理同步函數，那若是須要處理異步操做怎麼辦？

Action

如文檔中所說,Action相似於Mutations,不一樣在於：

• Aciton提交的是mutation,而不是直接變動狀態
• Action能夠包含任何異步操做

那也就是說，若是咱們是須要任意的異步操做，那就須要在Action中實現

---

部份內容略過，本文主要關於vuex基礎理解和使用

推薦視頻： https://ke.qq.com/course/258141