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