成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Vuex搭建

mayaohua / 2773人閱讀

摘要：是一個專為應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。改變中的狀態(tài)的唯一途徑就是顯式地提交。為了解決以上問題，允許我們將分割成模塊。

Vuex是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應用的所有組件的狀態(tài)，并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化。

這個狀態(tài)自管理應用包含以下幾個部分：
state: 驅動應用的數據源 

   view: 以聲明方式將state映射到視圖

actions: 響應在view上的用戶輸入導致的狀態(tài)變化
1.安裝 
npm install vuex --save
or
yarn add vuex
2.使用

每一個 Vuex 應用的核心就是 store （倉庫）。 "store" 基本上就是一個容器，它包含著你的應用中大部分的狀態(tài) (state) 。 Vuex 和單純的全局對象有以下兩點不同：

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

你不能直接改變store中的狀態(tài)。改變 store中的狀態(tài)的唯一途徑就是顯式地提交(commit) mutations 。這樣使得我們可以方便地跟蹤每一個狀態(tài)的變化，從而讓我們能夠實現(xiàn)一些工具幫助我們更好地了解我們的應用。

3.注冊

在src下創(chuàng)建Vuex文件夾, 在文件夾中創(chuàng)建store.js 導入并注冊

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)

在main.js 中要進行引入

import store from "./vuex/store"

new Vue({
  el: "#app",
  router,
  // 把 store 對象提供給 "store" 選項，這可以把 store 的實例注入所有的子組件
  store,
  template: "",
  components: { App }
})
4.項目中調用

在store文件中創(chuàng)建并導出

export default new Vuex.Store ({
  // 保存初始狀態(tài)的地方
  state: {
    count: 0 
  },
  // 定義方法改變狀態(tài)的地方
  mutations : {
  // state 狀態(tài) num 傳進來的參數
    increment:(state, num) =>{
      console.log(state)
      state.count = num
    }
  }
})
5.調用狀態(tài) 
this.$store.state.count

// 可以在計算屬性computed調用
 computed: {
      src() {
        return this.$store.state.count
      }
    },
6.修改狀態(tài) 
this.$store.commit("increment", 10)

// 以載荷形式分發(fā)
this.$store.commit({
  type: "increment",
  amount: 10
})

// 以對象形式分發(fā)
this.$store.commit("increment", {
  amount: 10
})
7. action

Action 類似于mutation，不同在于：

Action提交的是mutation，而不是直接變更狀態(tài)。

Action 可以包含任意異步操作。

// 異步操作
actions: {
    increments (context, num) {
      context.commit("increment", num)
    }
  }

Action 函數接受一個與 store 實例具有相同方法和屬性的 context 對象，因此你可以調用 context.commit 提交一個 mutation ，或者通過 context.state 和 context.getters 來獲取 state 和 getters 。

8. 觸發(fā)action 
this.$store.dispatch("increments", 50)
9. Module 
由于使用單一狀態(tài)樹，應用的所有狀態(tài)會集中到一個比較大的對象。當應用變得非常復雜時，store 對象就有可能變得相當臃腫。



為了解決以上問題，Vuex 允許我們將 store 分割成模塊（module）。每個模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊——從上至下進行同樣方式的分割：
const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://systransis.cn/yun/90671.html

相關文章

  • vue + vuex + koa2開發(fā)環(huán)境搭建及示例開發(fā)

    摘要：開發(fā)既是一個練習如何在開發(fā)環(huán)境中寫代碼的過程，反過來，也是一個驗證環(huán)境搭建的對不對好不好用的過程。前端調用后端接口示例為突出重點，排除干擾，方便理解。 寫在前面 這篇文章的主要目的是學會使用koa框架搭建web服務，從而提供一些后端接口，供前端調用。搭建這個環(huán)境的目的是： 前端工程師在跟后臺工程師商定了接口但還未聯(lián)調之前，涉及到向后端請求數據的功能能夠走前端工程師自己搭建的http路徑...

    xioqua 評論0 收藏0

  • 一個vue2.0+vuex+vue-router搭建的單頁潮流購物網站

    摘要：中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。這個回調函數就是我們實際進行狀態(tài)更改的地方，并且它會接受作為第一個參數中的類似于，不同在于提交的是，而不是直接變更狀態(tài)。 項目demo地址github源碼地址 首頁 覺得不錯，給我的github源碼點個贊吧QAQ showImg(https://segmentfault.com/img/bVI3GV?w=1366&h=591...

    Chaz 評論0 收藏0

  • 一個vue2.0+vuex+vue-router搭建的單頁潮流購物網站

    摘要：中的非常類似于事件每個都有一個字符串的事件類型和一個回調函數。這個回調函數就是我們實際進行狀態(tài)更改的地方，并且它會接受作為第一個參數中的類似于，不同在于提交的是，而不是直接變更狀態(tài)。 項目demo地址github源碼地址 首頁 覺得不錯，給我的github源碼點個贊吧QAQ showImg(https://segmentfault.com/img/bVI3GV?w=1366&h=591...

    Blackjun 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<