Vuex 快速入門(簡單易懂)

更新時間：2018年09月20日 10:27:04 作者：王念博客

這篇文章主要介紹了Vuex 快速入門(簡單易懂)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

一、vuex介紹

（1）vuex是什么？

1. 借鑒了Flux、Redux、 The Elm Architecture

2. 專為 Vue.js 設(shè)計的狀態(tài)管理模式

3. 集中式存儲和管理應(yīng)用程序中所有組件的狀態(tài)

4. Vuex 也集成到 Vue 的官方調(diào)試工具

5. 一個 Vuex 應(yīng)用的核心是 store（倉庫，一個容器），store包含著你的應(yīng)用中大部分的狀態(tài) (state)。

（2）什么情況下我應(yīng)該使用 Vuex？

1. 不適用：小型簡單應(yīng)用，用 Vuex 是繁瑣冗余的，更適合使用簡單的 store 模式。

2. 適用于：中大型單頁應(yīng)用，你可能會考慮如何把組件的共享狀態(tài)抽取出來，以一個全局單例模式管理，不管在哪個組件，都能獲取狀態(tài)/觸發(fā)行為，解決問題如下：

① 多個視圖使用于同一狀態(tài)：

傳參的方法對于多層嵌套的組件將會非常繁瑣，并且對于兄弟組件間的狀態(tài)傳遞無能為力

② 不同視圖需要變更同一狀態(tài)：

采用父子組件直接引用或者通過事件來變更和同步狀態(tài)的多份拷貝，通常會導(dǎo)致無法維護的代碼

（3）Vuex 和單純的全局對象有何不同？

1.Vuex 的狀態(tài)存儲是響應(yīng)式的

當(dāng) Vue 組件從 store 中讀取狀態(tài)的時候，若 store 中的狀態(tài)發(fā)生變化，那么相應(yīng)的組件也會相應(yīng)地得到高效更新。

2.你不能直接改變 store 中的狀態(tài)

改變 store 中的狀態(tài)的唯一途徑就是顯式地提交 (commit) mutation，方便我們跟蹤每一個狀態(tài)的變化。

二、vuex安裝

* vue cli 3 中搭建腳手架預(yù)設(shè)時選擇了“vuex”后便安裝了vuex，可跳過此步閱讀

（1）<script>引入

在 Vue 之后引入 vuex 會進行自動安裝：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>

（2）包管理

npm install vuex --save //yarn add vuex

在一個模塊化的打包系統(tǒng)中，您必須顯式地通過 Vue.use() 來安裝 Vuex：

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

Vue.use(Vuex)

（3）git clone 自己構(gòu)建

git clone https://github.com/vuejs/vuex.git node_modules/vuex
cd node_modules/vuex
npm install
npm run build

（4）兼容

Vuex 依賴 Promise。如果你支持的瀏覽器并沒有實現(xiàn) Promise (如 IE)，那么你可以使用一個 polyfill 的庫(如 es6-promis)

1.你可以通過 CDN 將其引入，window.Promise 會自動可用：

<script src="https://cdn.jsdelivr.net/npm/es6-promise@4/dist/es6-promise.auto.js"></script>

2.包管理器安裝：

npm install es6-promise --save //yarn add es6-promise

然后，將下列代碼添加到你使用 Vuex 之前的一個地方：

import 'es6-promise/auto'

三、使用

（1）使用介紹

1.搭建store實例

①. 在創(chuàng)建vuex實例的地方引入vue、vuex，使用vuex：

import Vue from 'vue'//引入vue
import Vuex from 'vuex'//引入vuex

Vue.use(Vuex); //使用 vuex

②. 如果你的actions中用到 store.dispath() ,要引入store

import store from './store' //引入狀態(tài)管理 store

③. new 一個 Vuex.Store 實例，并注冊 state、mutations、actions、getters到 Vuex.Store 實例中

ps. 你可以像上面那樣將“屬性和值”直接寫在實例中，當(dāng)代碼量大時，你也可以分別寫個.js文件，如下圖：

然后引入到 store/index.js 注冊到vuex實例中，如：

2.創(chuàng)建好 vuex.store 后，你需要在入口文件 main.js 中引入 store 并注冊到 vue 實例中，這樣就可以在任何組件使用store了：

3.在組件中使用：

①. 引入vuex中各屬性對應(yīng)的輔助函數(shù)：

import {mapActions, mapState,mapGetters} from 'vuex' //注冊 action 、 state 、getter

②. 使用store中的狀態(tài)數(shù)據(jù)、方法：

使用方法有很多，這種事最簡單實用的，更多可以查看官網(wǎng)學(xué)習(xí)：https://vuex.vuejs.org/zh/

（2）具體demo

來個簡單易懂的計數(shù)

eg：store.js

import Vue from 'vue';
import Vuex from 'vuex'; //引入 vuex
import store from './store' //注冊store

Vue.use(Vuex); //使用 vuex

export default new Vuex.Store({
  state: {
    // 初始化狀態(tài)
    count: 0,
    someLists:[]
  },
  mutations: {
    // 處理狀態(tài)
    increment(state, payload) {
      state.count += payload.step || 1;
    }
  },
  actions: {
    // 提交改變后的狀態(tài)
    increment(context, param) {
      context.state.count += param.step;
      context.commit('increment', context.state.count)//提交改變后的state.count值
    },
    incrementStep({state, commit, rootState}) {
      if (rootState.count < 100) {
        store.dispatch('increment', {//調(diào)用increment()方法
          step: 10
        })
      }
    }
  },
  getters: {
    //處理列表項
    someLists: state =>param=> {
      return state.someLists.filter(() => param.done)
    }
  }
})

使用時，eg：

main.js：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store' //引入狀態(tài)管理 store

Vue.config.productionTip = false

new Vue({
 router,
 store,//注冊store(這可以把 store 的實例注入所有的子組件)
 render: h => h(App)
}).$mount('#app')

views/home.vue：

<template>
 <div class="home">
  <!--在前端HTML頁面中使用 count-->
  <HelloWorld :msg="count"/>
  <!--表單處理 雙向綁定 count-->
  <input :value="count" @input="incrementStep">
 </div>
</template>

<script>
  import HelloWorld from '@/components/HelloWorld.vue'
  import {mapActions, mapState,mapGetters} from 'vuex' //注冊 action 和 state

  export default {
    name: 'home',
    computed: {
      //在這里映射 store.state.count，使用方法和 computed 里的其他屬性一樣
      ...mapState([
        'count'
      ]),
      count () {
        return store.state.count
      }
    },
    created() {
      this.incrementStep();
    },
    methods: {
      //在這里引入 action 里的方法，使用方法和 methods 里的其他方法一樣
      ...mapActions([
        'incrementStep'
      ]),
      // 使用對象展開運算符將 getter 混入 computed 對象中
      ...mapGetters([
        'someLists'
        // ...
      ])
    },
    components: {
      HelloWorld
    }
  }
</script>

運行結(jié)果：