Vuex搭建

mayaohua 發布于2019-08-21 18:38 / 2766人閱讀

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

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

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

state: 驅動應用的數據源 

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

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

1.安裝

npm install vuex --save
or
yarn add vuex

2.使用

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

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

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

3.注冊

在src下創建Vuex文件夾, 在文件夾中創建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文件中創建并導出

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

5.調用狀態

this.$store.state.count

// 可以在計算屬性computed調用
 computed: {
      src() {
        return this.$store.state.count
      }
    },

6.修改狀態

this.$store.commit("increment", 10)

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

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

7. action

Action 類似于mutation，不同在于：

Action提交的是mutation，而不是直接變更狀態。

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

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

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

8. 觸發action

this.$store.dispatch("increments", 50)

9. Module

由于使用單一狀態樹，應用的所有狀態會集中到一個比較大的對象。當應用變得非常復雜時，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 的狀態
store.state.b // -> moduleB 的狀態

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

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

vue + vuex + koa2開發環境搭建及示例開發

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

xioqua 2019-08-22 13:56 評論0 收藏0
一個vue2.0+vuex+vue-router搭建的單頁潮流購物網站

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

Chaz 2019-08-20 14:13 評論0 收藏0
一個vue2.0+vuex+vue-router搭建的單頁潮流購物網站

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

Blackjun 2019-08-01 16:16 評論0 收藏0