vue-vuex的使用

做后台項目的時候，有時候會需要用到狀態管理，VUEX就能夠很好的為我們解決好這個問題。

安裝 VUEX

npm install vuex --save

具體使用：

建立 src/store/index.js

index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

const store = new Vuex.Store({
    state:{
        count:1
    },
    getters:{
        getStateCount:function(state){
            return state.count +1;
        }
    },
    mutations:{
        add(state){
            state.count += 1;
        },
        reduce(state){
            state.count -= 1;
        }
    }
})

export default store

main.js文件

import store from './store'

接下來我們就可以寫 vuex 的業務代碼了

我們在視圖上綁定這個 count 

<p>store中的state的count值：{{this.$store.state.count}}</p>

Getters：

Getter相當於vue中的computed計算屬性，getter 的返回值會根據它的依賴被緩存起來，且只有當它的依賴值發生了改變才會被重新計算，這里我們可以通過定義vuex的Getter來獲取，Getters 可以用於監聽、state中的值的變化，返回計算后的結果

視圖使用：

<p>store中的state的count值：{{this.$store.getters.getStateCount}}</p>

Mutations：

數據我們在頁面是獲取到了，但是如果我們需要修改count值怎么辦？如果需要修改store中的值唯一的方法就是提交mutation來修改。

例如：我們現在Hello World.vue文件中添加兩個按鈕，一個加1，一個減1；這里我們點擊按鈕調用addFun（執行加的方法）和reductionFun（執行減法的方法），然后在里面直接提交mutations中的方法修改值：

這樣就解決了，改變改變store里面值的方法。

Actions:

上面使用 Mutations 能夠修改 store 里面的值，但是官方並不建議我們這樣做，而是讓我們去提交一個actions，在actions中提交mutation再去修改狀態值，接下來我們修改index.js文件，先定義actions提交mutation的函數：

使用方式：

methods:{
  addFun(){
    // this.$store.commit('add');
    this.$store.dispatch('addFun');
  },
  reduceFun(){
    // this.$store.commit('reduce');
    this.$store.dispatch('reduceFun');
  },
}

這里我們把commit提交mutations修改為使用dispatch來提交actions；我們點擊頁面，效果是一樣的。

以上就是我們實現 vuex 的一個過程。

拓展修改狀態：我們可以利用這個屬性來做數據狀態的改變

參考：昆明網站建設

https://baijiahao.baidu.com/s?id=1618794879569468435