腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Vuex 快速入門(簡(jiǎn)單易懂)

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

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

一、vuex介紹

（1）vuex是什么？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

二、vuex安裝

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

（1）<script>引入

在 Vue 之后引入 vuex 會(huì)進(jìn)行自動(dòng)安裝：

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

（2）包管理

npm install vuex --save //yarn add vuex

在一個(gè)模塊化的打包系統(tǒng)中，您必須顯式地通過(guò) Vue.use() 來(lái)安裝 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。如果你支持的瀏覽器并沒(méi)有實(shí)現(xiàn) Promise (如 IE)，那么你可以使用一個(gè) polyfill 的庫(kù)(如 es6-promis)

1.你可以通過(guò) CDN 將其引入，window.Promise 會(huì)自動(dòng)可用：

<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 之前的一個(gè)地方：

import 'es6-promise/auto'

三、使用

（1）使用介紹

1.搭建store實(shí)例

①. 在創(chuàng)建vuex實(shí)例的地方引入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 一個(gè) Vuex.Store 實(shí)例，并注冊(cè) state、mutations、actions、getters到 Vuex.Store 實(shí)例中

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

然后引入到 store/index.js 注冊(cè)到vuex實(shí)例中，如：

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

3.在組件中使用：

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

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

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

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

（2）具體demo

來(lái)個(gè)簡(jiǎn)單易懂的計(jì)數(shù)

eg：store.js

import Vue from 'vue';
import Vuex from 'vuex'; //引入 vuex
import store from './store' //注冊(cè)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: {
    //處理列表項(xiàng)
    someLists: state =>param=> {
      return state.someLists.filter(() => param.done)
    }
  }
})

使用時(shí)，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,//注冊(cè)store(這可以把 store 的實(shí)例注入所有的子組件)
 render: h => h(App)
}).$mount('#app')

views/home.vue：

<template>
 <div class="home">
  <!--在前端HTML頁(yè)面中使用 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' //注冊(cè) 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'
      ]),
      // 使用對(duì)象展開(kāi)運(yùn)算符將 getter 混入 computed 對(duì)象中
      ...mapGetters([
        'someLists'
        // ...
      ])
    },
    components: {
      HelloWorld
    }
  }
</script>

運(yùn)行結(jié)果：