筆記：1.初識Vuex

Vuex---vue.js的狀態管理模式,數據響應式管理，簡而言之就是在vue中有多個組件或者是路由都需要使用一個狀態(可以理解爲一個變量的狀態或者是數據),不需要使用props傳值那麼麻煩或者是使用Vue.prototype在原型上聲明一個全局變量(直接聲明的變量沒有通過Vuex的話，他的狀態不是響應式的，即其他頁面修改這個狀態的時候，不會改變初始值，那麼另一個頁面需要跟蹤使用的時候得到的依舊是原始值,所以就有需要使用vuex來管理或更改)

Vuex的五個概念

state:{},//數據存儲

mutations:{},//同步操作的數據修改----更改state中的數據狀態(同步操作)

actions:{},//異步操作的數據修改----異步操作，發送請求數據回調到mutations中進行修改state中的數據

getters:{},//類似於vue的計算屬性

modules:{}//模塊化vuex，將store分割成不同的模塊

安裝

npm install vuex

使用mutations修改數據

//store文件下的index文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
        count: 10
    },
    mutations: {
        incremment(state) {//定義一個方法修改store中的數據count
            state.count++
        }
    }
})
export default store//導出store

vue使用,需要將store在main.js中引入才能使用哦

//html
<div>{{$store.state.count}}</div><!--$store.state.count獲取到store的state中的數據-->
<el-button @click="addCount">+</el-button>

//js
addCount() {
    //修改vuex中的數據。必須使用commit來提交，括號裏面寫的是在vuex中定義的方法名
    this.$store.commit("incremment");
}

專業在點擊按鈕的時候，state中的數據就會響應變化