Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐-創(chuàng)新互聯(lián)

一、介紹Vuex

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化，適合于構(gòu)建中大型單頁應(yīng)用。

成都創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于成都網(wǎng)站建設(shè)、網(wǎng)站設(shè)計、平順網(wǎng)絡(luò)推廣、小程序開發(fā)、平順網(wǎng)絡(luò)營銷、平順企業(yè)策劃、平順品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務(wù)，您的肯定，是我們大的嘉獎；成都創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供平順建站搭建服務(wù)，24小時服務(wù)熱線：028-86922220，官方網(wǎng)址：muchs.cn

1、什么是狀態(tài)管理模式？

看個簡單的例子：

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

<!DOCTYPE html><html><head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Vuex Demo 01</title><script src="http://cdn.bootcss.com/vue/1.0.26/vue.min.js"></script><script src="http://cdn.bootcss.com/vuex/0.8.2/vuex.min.js"></script></head><body>
  <!-- 2、view，映射到視圖的數(shù)據(jù)counterValue； -->
  <h4>Count is {{ counterValue }}</h4>
  <div>
    <button @click="increment">Increment +1</button>
    <button @click="decrement">Decrement -1</button>
  </div></body><script>var app = new Vue({
  el: 'body',
  store: new Vuex.Store({    // 1、state，驅(qū)動應(yīng)用的數(shù)據(jù)源；    state: {
      count: 0
    },
    mutations: {
      INCREMENT: function(state, amount) {
        state.count = state.count + amount
      },
      DECREMENT: function(state, amount) {
        state.count = state.count - amount
      }
    }
  }),
  vuex: {
    getters: {
      counterValue: function(state) {        return state.count
      }
    },    // 3、actions，響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化。    actions: {
      increment: function({ dispatch, state }){
        dispatch('INCREMENT', 1)
      },
      decrement: function({ dispatch, state }){
        dispatch('DECREMENT', 1)
      }
    }
  }
})</script></html>

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

代碼中標(biāo)識了：

1、state，驅(qū)動應(yīng)用的數(shù)據(jù)源；
2、view，映射到視圖的數(shù)據(jù)counterValue；
3、actions，響應(yīng)在view上的用戶輸入導(dǎo)致的狀態(tài)變化。

用簡單示意圖表示他們之間的關(guān)系：

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

我們知道，中大型的應(yīng)用一般會遇到多個組件共享同一狀態(tài)的情況：

1、多個視圖依賴于同一狀態(tài)

2、來自不同視圖的行為需要變更同一狀態(tài)

于是需要把組件的共享狀態(tài)抽取出來，以一個全局單例模式管理，另外，需要定義和隔離狀態(tài)管理中的各種概念并強制遵守一定的規(guī)則。

這就是 Vuex 背后的基本思想，借鑒了 Flux、Redux、和 The Elm Architecture。與其他模式不同的是，Vuex 是專門為 Vue.js 設(shè)計的狀態(tài)管理庫，以利用 Vue.js 的細粒度數(shù)據(jù)響應(yīng)機制來進行高效的狀態(tài)更新。

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

2、Vuex的核心概念

1、State: 單一狀態(tài)樹，用一個對象包含了全部的應(yīng)用層級狀態(tài)，作為一個『唯一數(shù)據(jù)源(SSOT)』而存在，每個應(yīng)用將僅僅包含一個 store 實例。

2、Getters: Vuex 允許我們在 store 中定義『getters』（可以認(rèn)為是 store 的計算屬性）。

3、Mutations: Vuex 中的 mutations 非常類似于事件：每個 mutation 都有一個字符串的 事件類型 (type) 和 一個 回調(diào)函數(shù) (handler)。這個回調(diào)函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)。

4、Actions: 類似于 mutation，不同在于：①Action 提交的是 mutation，而不是直接變更狀態(tài)；②Action 可以包含任意異步操作。

5、Modules: 為解決單一狀態(tài)樹導(dǎo)致應(yīng)用的所有狀態(tài)集中在一個store對象的臃腫問題，Vuex將store分割到模塊（module）。每個模塊擁有自己的 state、mutation、action、getters、甚至是嵌套子模塊——從上至下進行類似的分割。

接著我們開始構(gòu)建備忘錄應(yīng)用，在以下構(gòu)建過程的介紹中，再加深理解上述概念。

二、環(huán)境安裝

1.安裝 vue-cli

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

2.初始化應(yīng)用

vue init webpack vue-notes-demo
cd vue-notes-demo
npm install // 安裝依賴包
npm run dev // 啟動服務(wù)

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

結(jié)果為：

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

目錄結(jié)構(gòu)為：

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

三、功能模塊

先看下我們要做的demo的效果為：

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

主要功能模塊為：

  • 新增計劃，新增一個計劃，編輯區(qū)顯示空的計劃內(nèi)容。

  • 移除計劃，刪除一個計劃之后，計劃列表少了該計劃。

  • 所有計劃的總時長，將所有的計劃時間加起來。

四、項目組件劃分

在原來的目錄結(jié)構(gòu)的調(diào)整下，最終的目錄結(jié)構(gòu)為：

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

下面詳細介紹下：

1、組件部分

1.首頁組件：Home.vue

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

<template>
  <div class="jumbotron">
    <h2>我的備忘錄</h2>
    <p>
      <strong>
        <router-link to="/time-entries">創(chuàng)建一個計劃</router-link>
      </strong>
    </p>
  </div></template>

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

2.計算計劃總時長組件：Sidebar.vue

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐 View Code

3.計劃列表組件：TimeEntries.vue

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐 View Code

4.新增計劃組件：LogTime.vue

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐 View Code

2、vuex中用來存儲數(shù)據(jù)的劃分為：

1.初始化vuex.Store: index.js

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './actions'

Vue.use(Vuex);

const state = {
  totalTime: 0,
  list: []
};

export default new Vuex.Store({
  state,
  mutations,
  actions
})

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

State: 單一狀態(tài)樹，用一個state對象包含了全部的應(yīng)用層級狀態(tài)，代碼中只new 了一次store實例 Vuex.Store。

2.負(fù)責(zé)觸發(fā)事件和傳入?yún)?shù)：actions.js

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐 View Code

實踐中，我們會經(jīng)常會用到 ES2015 的 參數(shù)解構(gòu) 來簡化代碼（特別是我們需要調(diào)用 commit 很多次的時候）：

actions: {
  increment ({ commit }) {
    commit('increment')
  }
}

3.注冊各種數(shù)據(jù)變化的方法: mutations.js

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐 View Code

使用常量替代 mutation 事件類型在各種 Flux 實現(xiàn)中是很常見的模式。這樣可以使 linter 之類的工具發(fā)揮作用，同時把這些常量放在單獨的文件中可以讓你的代碼合作者對整個 app 包含的 mutation 一目了然：

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

// mutation-types.js 
export const SOME_MUTATION = 'SOME_MUTATION'

mutations: {
    // 我們可以使用 ES2015 風(fēng)格的計算屬性命名功能來使用一個常量作為函數(shù)名
    [SOME_MUTATION] (state) {
      // mutate state
    }
  }

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

4.記錄所有的事件名: mutation-types.js

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐 View Code

配合上面常量替代 mutation 事件類型的使用

3、初始化部分

入口文件渲染的模版index.html比較簡單：

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

<!DOCTYPE html><html>
  <head>
    <meta charset="utf-8">
    <title>vue-notes-demo</title>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
    </div>
  </body></html>

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐

入口文件main.js的代碼：

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐 View Code

代碼中 ...App 相當(dāng)于 render:h => h(App)

初始化組件App.vue為：

Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐 View Code

至此，實踐結(jié)束，一些原理性的東西我還需要多去理解^_^

源代碼：【vuex2.0實踐】

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

網(wǎng)站標(biāo)題：Vuex2.0+Vue2.0構(gòu)建備忘錄應(yīng)用實踐-創(chuàng)新互聯(lián)
鏈接URL：http://muchs.cn/article6/dejeog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供電子商務(wù)、ChatGPT、云服務(wù)器、關(guān)鍵詞優(yōu)化、服務(wù)器托管、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

h5響應(yīng)式網(wǎng)站建設(shè)