如何安裝vue狀態管理Vuex

這篇文章主要介紹了如何安裝vue狀態管理Vuex，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

安裝vue狀態管理的方法：1、創建一個基于Vue的工程，執行“npm install”命令安裝依賴；2、在控制命令行中，執行“npm install vuex --save”命令安裝Vuex即可。

本教程操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

一、什么是Vuex

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。Vuex 也集成到 Vue 的官方調試工具devtools extension，提供了諸如零配置的 time-travel 調試、狀態快照導入導出等高級調試功能。

這個狀態自管理應用包含以下幾個部分：

• state，驅動應用的數據源；

• view，以聲明方式將state映射到視圖；

• actions，響應在view上的用戶輸入導致的狀態變化。

以下是一個表示“單向數據流”理念的極簡示意：

更復雜的情況

• 多個視圖依賴于同一狀態。

• 來自不同視圖的行為需要變更同一狀態。

二、什么情況下我應該使用 Vuex？

雖然 Vuex 可以幫助我們管理共享狀態，但也附帶了更多的概念和框架。這需要對短期和長期效益進行權衡。

如果您不打算開發大型單頁應用，使用 Vuex 可能是繁瑣冗余的。確實是如此——如果您的應用夠簡單，您最好不要使用 Vuex。一個簡單的global event bus

就足夠您所需了。但是，如果您需要構建是一個中大型單頁應用，您很可能會考慮如何更好地在組件外部管理狀態，Vuex 將會成為自然而然的選擇。引用 Redux 的作者 Dan Abramov 的話說就是：

Flux 架構就像眼鏡：您自會知道什么時候需要它。

三、安裝

首先需要創建一個基于Vue的工程，通常你可以這樣做：

# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創建一個基于 webpack 模板的新項目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev

利用npm包管理工具，進行安裝 vuex。在控制命令行中輸入下邊的命令就可以了。

npm install vuex --save

要注意的是這里一定要加上 –save，因為你這個包我們在生產環境中是要使用的。

通過簡單的依賴安裝操作，vuex就算引用成功了，接下來我們就可以盡情的玩耍了。

一個簡單的示例，在main.js文件中輸入如下代碼：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})
store.commit('increment')

/* eslint-disable no-new */
new Vue({
  el: '#app',
  template: `<p>{{ count }}</p>`,
  computed: {
    count () {
      return store.state.count
    }
  }
})

運行后可以看到頁面上顯示一個1，即函數increment已經正確的執行，count由初始的0自加后變為1輸出，
需要指出的是，我們通過提交 mutation 的方式，而非直接改變 store.state.count，是因為我們想要更明確地追蹤到狀態的變化。

通常我們不會這樣去使用它，更好的使用方法是：

1、新建一個store文件夾（這個不是必須的），并在文件夾下新建store.js文件，文件中引入我們的vue和vuex。

import Vue from 'vue';
import Vuex from 'vuex';

2、在store.js文件中，用Vue.use對vuex進行引用。

Vue.use(Vuex);

3、在main.js 中引入新建的vuex文件

import store from './store/store'

4、Vuex 通過 store 選項，提供了一種機制將狀態從根組件“注入”到每一個子組件中（需調用 Vue.use(Vuex)，通過在根實例中注冊 store 選項，該 store 實例會注入到根組件下的所有子組件中，且子組件能通過 this.$store 訪問到。:

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

四、使用

1、現在我們store.js文件里增加一個常量對象。

state: {
  count: 1
},

2、用export default 封裝代碼，讓外部可以引用。

export default new Vuex.Store({
  name: 'store',
  state: {
    count: 1
  }
})

3、新建一個Vue的測試模板，位置在components文件夾下，名字隨便起，我這里叫count.vue。在模板中我們使用{{$store.state.count}}輸出count 的值（注意：由于前面已經將store注入到vue的實例中，故不需要再次引用）。

 <template>
    <p>
        <h3>{{msg}}</h3>
        <hr/>
        <h4>{{$store.state.count}}</h4>
    </p>
</template>
<script>
export default {
  data () {
    return {
      msg: 'Hello Vuex'
    }
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
</script>

4、在store.js文件中加入兩個改變state的方法。

mutations: {
    increment (state) {
      state.count += 1
    },
    decrement (state) {
      state.count -= 1
    }
  }

5、在test.vue模板中加入兩個按鈕，并調用mutations中的方法。

<p>
   <button @click="$store.commit('increment')">+</button>
   <button @click="$store.commit('decrement')">-</button>
</p>

6、在router文件夾下的index.js中引用文件，定義對應的路由，運行程序并進入該界面，點擊按鈕查看效果

{
   path: '/count',
   name: 'Count',
   component: Count
}

五、state訪問狀態對象

state，這個就是我們說的訪問狀態對象，它就是我們SPA（單頁應用程序）中的共享值。

訪問狀態對象賦值給內部對象，也就是把stroe.js中的值，賦值給我們模板里data中的值。有三種賦值方式

1、通過computed的計算屬性直接賦值

computed屬性可以在輸出前，對data中的值進行改變，我們就利用這種特性把store.js中的state值賦值給我們模板中的data值。

    computed:{
        count(){
            return this.$store.state.count;
        }
    }

這里需要注意的是return this.$store.state.count這一句，一定要寫this，要不你會找不到$store的。這種寫法很好理解，但是寫起來是比較麻煩的，那我們來看看第二種寫法。

2、通過mapState的對象來賦值

我們首先要用import引入mapState。

    import {mapState} from 'vuex'

然后還在computed計算屬性里寫如下代碼：（根據需要選用一種方法即可）

   computed: mapState({
    // 箭頭函數可使代碼更簡練
    count: state => state.count,   // es6寫法，function (state) { return state.count }

    // 傳字符串參數 'count' 等同于 `state => state.count`
    countAlias: 'count',

    // 為了能夠使用 `this` 獲取局部狀態，必須使用常規函數
    countPlusLocalState (state) {
      return state.count + this.localCount
    }
  })

3、當映射的計算屬性的名稱與 state 的子節點名稱相同時，我們也可以給 mapState 傳一個字符串數組。

computed: mapState([
  // 映射 this.count 為 store.state.count
  'count'
])

4、還可以采用簡化寫法（個人比較喜歡這種寫法本質上和第三種是一個意思，后面的mutations中也有類似的寫法）

// 使用對象展開運算符將此對象混入到外部對象中
    ...mapState({
      num: 'count'
    })

這個算是最簡單的寫法了，在實際項目開發當中也經常這樣使用。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“如何安裝vue狀態管理Vuex”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!