摘要：基本概念現(xiàn)在回到我們的中創(chuàng)建且聲明一個(gè)對(duì)象張三李四王五這里不同于文檔中的寫法，我這里直接將創(chuàng)建聲明簡寫成一段代碼個(gè)人更偏好這樣寫。

用2句話概括：

主要應(yīng)用于Vue.js中管理數(shù)據(jù)狀態(tài)的一個(gè)庫

通過創(chuàng)建一個(gè)集中的數(shù)據(jù)存儲(chǔ)，供程序中所有組件訪問

當(dāng)然這么說肯定還是有所不懂，這里我就用單一使用vue.js和使用vuex.js場(chǎng)景的不同進(jìn)行對(duì)比講解

單一使用Vue.js的場(chǎng)景

在單一使用vue.js的場(chǎng)景中，我們難免要在不同的組件中互相傳值。在該場(chǎng)景中，由一個(gè)根組件，兩個(gè)父組件再各自擁有一個(gè)子組件，我們?nèi)绻褂胮rop的屬性傳值，在這個(gè)詳情組件需要使用添加組件中的某個(gè)值時(shí)，我們需要不停的觸發(fā)某個(gè)事件將這個(gè)值一層一層一層一層地沿著這個(gè)路徑傳過去，這樣能實(shí)現(xiàn)將值傳遞給詳情組件，但這是相當(dāng)?shù)穆闊ü碇牢耶?dāng)初不知道vuex為了傳值頭有多大）。現(xiàn)在讓我們看下vuex.js場(chǎng)景下的效果

使用Vuex.js的場(chǎng)景

我們將使用專門的store存儲(chǔ)所有的數(shù)據(jù)，如果我們需要取到組件二或更深一級(jí)的子組件的某個(gè)數(shù)據(jù)我們可以直接使用getter方法直接拿到其中的數(shù)據(jù)。如果我們需要向store中添加或更改某個(gè)數(shù)據(jù)，我們可以用mutation或直接$store.state的形式直接跨過父組件向store中直接添加或更改數(shù)據(jù)。就好比一個(gè)倉庫，所有人能直接跨過上級(jí)拿到倉庫中的某個(gè)你所需要的東西，這無疑是在我們使用vue開發(fā)項(xiàng)目時(shí)，相當(dāng)省時(shí)省力的辦法。

涉及到非父子關(guān)系的組件，例如兄弟關(guān)系、祖孫關(guān)系，甚至更遠(yuǎn)的關(guān)系組件之間的聯(lián)系

中大型單頁應(yīng)用，考慮如何更好地在組件外部管理狀態(tài)

相信大家在看完上面vuex的基本介紹后，心里對(duì)它使用場(chǎng)景也有了一個(gè)大概的想法。
總而言之，在頁面數(shù)據(jù)結(jié)構(gòu)比較復(fù)雜，數(shù)據(jù)和組件分離，分別處理，組件量較大的情況下，那么使用 Vuex 是非常合適的。

在使用vue-cli腳手架創(chuàng)建項(xiàng)目后

npm install vuex 

進(jìn)入項(xiàng)目安裝vuex,安裝完成后，在項(xiàng)目的文件夾src中再新建一個(gè)文件夾store,文件夾中新建文件store.js(命名為本人習(xí)慣)。

store.js

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

//引入之后，對(duì)vuex進(jìn)行引用
Vue.use(Vuex)

main.js

import {store} from "./store/store"

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

在main.js 中引入vuex文件

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

現(xiàn)在回到我們的store.js中

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

這里不同于文檔中的寫法，我這里直接將創(chuàng)建聲明簡寫成一段代碼（個(gè)人更偏好這樣寫）。在state中填寫外部組件需要的數(shù)據(jù)。外部組件中調(diào)取數(shù)據(jù)：

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

//這里有兩種辦法
//p在computed的itemList方法中循環(huán)
{{item.num}}{{item.name}}

//p直接指向store中的state的items數(shù)組
{{item.num}}{{item.name}}

可以通過computed中的方法獲取數(shù)據(jù)，也可以直接使用this.$store.state。

getters乍一看也是獲取數(shù)據(jù)，但是在獲取之前它多了一個(gè)步驟：計(jì)算過濾獲取的數(shù)據(jù)并返回過濾完成后的數(shù)據(jù)。如果多個(gè)組件需要用到篩選后的數(shù)據(jù)，那我們就必須到處重復(fù)寫該計(jì)算屬性函數(shù)；或者將其提取到一個(gè)公共的工具函數(shù)中，并將公共函數(shù)多處導(dǎo)入。
store.js

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

組件中：

//寫法一：
{{item.num}}{{item.name}}

//寫法二：
改變數(shù)字

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

p標(biāo)簽在computed中返回getters數(shù)據(jù)的中循環(huán)，數(shù)據(jù)顯示出來便直接是計(jì)算完成后的數(shù)據(jù)

我們可以使用mutations配合vuex提供的commit方法來修改state中的狀態(tài)

store.js

export const store = new Vuex.Store({
    state:{
        isShow:false,
        myData:"",
        items:[
            {
                name:"張三",
                num:1
            },
            {
                name:"李四",
                num:2
            },
            {
                name:"王五",
                num:3
            }
            ]
    },
    mutations:{
        //定義一個(gè)函數(shù)動(dòng)態(tài)修改state的狀態(tài)值
        numTurn(state){ /這里的state代表上面的State
            state.items.forEach(item=>{
                item.num+=100
            })
        }
    }
})

組件中：

//寫法一：
改變數(shù)字

//寫法二：
改變數(shù)字

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

兩種寫法原理是一樣的，都能實(shí)現(xiàn)效果。注意：mutations中的方法需要commit配合回調(diào)實(shí)現(xiàn)，而不再是$store.mutation,且mutations只能處理同步函數(shù)，那如果需要處理異步操作怎么辦？

如文檔中所說,Action類似于Mutations,不同在于：

Aciton提交的是mutation,而不是直接變更狀態(tài)

Action可以包含任何異步操作

那也就是說，如果我們是需要任意的異步操作，那就需要在Action中實(shí)現(xiàn)

部分內(nèi)容略過，本文主要關(guān)于vuex基礎(chǔ)理解和使用

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