淺談vuex

chaos_G 發(fā)布于2019-08-23 13:50 / 578人閱讀

摘要：概念淺談是一個(gè)專為應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。更改的中的狀態(tài)的唯一方法，類似。允許我們將分割成模塊。

通過(guò)購(gòu)物車的一個(gè)案列，把vuex學(xué)習(xí)了一篇。

vuex概念淺談

Vuex 是一個(gè)專為 Vue.js 應(yīng)用程序開(kāi)發(fā)的狀態(tài)管理模式。它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。簡(jiǎn)單的來(lái)說(shuō)，就是數(shù)據(jù)共用，對(duì)數(shù)據(jù)集中起來(lái)進(jìn)行統(tǒng)一的管理。

如果您的應(yīng)用夠簡(jiǎn)單，您最好不要使用 Vuex。一個(gè)簡(jiǎn)單的 global event bus 就足夠您所需了。但是，如果您需要構(gòu)建是一個(gè)中大型單頁(yè)應(yīng)用，您很可能會(huì)考慮如何更好地在組件外部管理狀態(tài)，Vuex 將會(huì)成為自然而然的選擇。

核心概念主要有這些

State

Vuex 使用單一狀態(tài)樹——是的，用一個(gè)對(duì)象就包含了全部的應(yīng)用層級(jí)狀態(tài)，將所需要的數(shù)據(jù)寫放這里，類似于data。

Getter

有時(shí)候我們需要從 store 中的 state 中派生出一些狀態(tài)，使用Getter，類似于computed。

Mutation

更改 Vuex 的 store 中的狀態(tài)的唯一方法，類似methods。

Action

Action 提交的是 mutation，而不是直接變更狀態(tài)，可以包含任意異步操作，這里主要是操作異步操作的，使用起來(lái)幾乎和mutations方法一模一樣,類似methods。

Module

當(dāng)應(yīng)用變得非常復(fù)雜時(shí)，store 對(duì)象就有可能變得相當(dāng)臃腫。Vuex 允許我們將 store 分割成模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getter、甚至是嵌套子模塊。

vuex

首先需要?jiǎng)?chuàng)建一個(gè)Vue項(xiàng)目

# 全局安裝 vue-cli

$ npm install --global vue-cli

# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目

$ vue init webpack my-project

# 安裝依賴，走你

$ cd my-project

$ npm install

$ npm run dev

安裝vuex

npm install --save vuex

對(duì)vuex進(jìn)行配置

1.創(chuàng)建一個(gè)store文件夾

2.在store文件夾下創(chuàng)建如圖的一系列js文件

3.在main.js文件中引入上面創(chuàng)建的store.js

import store from "./store"

new Vue({

  el: "#app",

  store,  //將store暴露出來(lái)

  components: { App },

  template: ""

})

4.將要存放的數(shù)據(jù)寫在state對(duì)象中，state則存寫在index.js文件中。

import Vue from "vue"

import Vuex from "vuex"

import mutations from "./mutations"

import actions from "./actions"

import getters from "./getters"

import shop from "./modules/shop"

Vue.use(Vuex)

const state = {

  goods: [

    {

      id: "0",

      name: "vivo-X20Plus屏幕指紋版",

      hint: "逆光也清晰，照亮你的美",

      price: 3596.00,

      num: 0,

      img: require("../assets/v.jpg")

    },

    {

      id: "1",

      name: "華為mate10Plus",

      hint: "真正的人工智能芯片",

      price: 4999.00,

      num: 0,

      img: require("../assets/h.jpeg")

    },

    {

      id: "2",

      name: "華為mate10Plus",

      hint: "真正的人工智能芯片",

      price: 4999.00,

      num: 0,

      img: require("../assets/v.jpg")

    }

  ],

  totalPrice: 0.00,

  totalNum: 0

}

export default new Vuex.Store({

  state,

  mutations,

  actions,

  getters,

  modules: {

    shop //shop模塊

  }

})

5.將改變state原始數(shù)據(jù)的方法寫在mutation.js文件中，可以使用常量替代 Mutation 事件類型，用不用常量取決于你——在需要多人協(xié)作的大型項(xiàng)目中，這會(huì)很有幫助?？梢宰屇愕拇a合作者對(duì)整個(gè) app 包含的 mutation 一目了然。

// 使用常量，這是mutation-type.js文件

export const ADD_CART = "ADD_CART"

export const REDUCE_CART = "REDUCE_CART"

// 這是mutation.js文件

import {

  ADD_CART,

  REDUCE_CART

} from "./mutation-types.js"

export default {

  [ADD_CART] (state, id) {

    state.goods[id].num++

    state.totalNum++

    state.totalPrice += state.goods[id].price

    // console.log(state.totalPrice)

  },

  [REDUCE_CART] (state, id) {

    if (state.goods[id].num > 0) {

      state.goods[id].num--

      state.totalNum--

      state.totalPrice -= state.goods[id].price

    }

  }

}

6.對(duì)state數(shù)據(jù)派生出一些狀態(tài)，例如需要知道商品的個(gè)數(shù)

const getters = {

  goods_obj: state => state.goods,

  goods_length: state => state.goods.length

}

export default getters

7.使用vuex，獲取數(shù)據(jù)，方法。

8.假如數(shù)據(jù)過(guò)多，復(fù)雜，可以進(jìn)行模塊化來(lái)開(kāi)發(fā)，可以將上述的state，mutation，action等可以同時(shí)寫在shop.js文件中，此時(shí)shop就是一個(gè)模塊了。

總結(jié)

若數(shù)據(jù)不是很多，也不復(fù)雜，我們也可以在構(gòu)造vue實(shí)例data中存放我們所需要的共用數(shù)據(jù)。一旦數(shù)據(jù)較多，復(fù)雜，vuex是一個(gè)非常不錯(cuò)的選擇，對(duì)于狀態(tài)管理。

努力學(xué)習(xí)中，希望能和大神一起。

github地址：https://github.com/flym1013/v...

效果預(yù)覽地址： https://flym1013.github.io/vu...

效果圖預(yù)覽

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/99640.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

chaos_G

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

生活需要煙火

閱讀 1644·2021-10-09 09:44
安利個(gè)開(kāi)源免費(fèi)流程圖應(yīng)用Draw.io/diagrams，告別Visio/ProcessOn

閱讀 2804·2021-10-08 10:04
【簡(jiǎn)單地過(guò)一遍C語(yǔ)言基礎(chǔ)部分】所有知識(shí)點(diǎn)，點(diǎn)到為止?。▋H一萬(wàn)多字）

閱讀 2475·2021-09-26 09:55
Quoted-printable編碼的介紹和quopri庫(kù)的使用

閱讀 3854·2021-09-22 10:02
JavaScript數(shù)據(jù)類型轉(zhuǎn)換

閱讀 3315·2019-08-29 17:08
Codepen 每日精選（2018-4-23）

閱讀 1075·2019-08-29 15:08
接了個(gè)新項(xiàng)目

閱讀 2963·2019-08-26 13:52
[ 一起學(xué)React系列 -- 12 ] React-Router4 (2)

閱讀 3279·2019-08-26 13:34

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

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

淺談vuex

首先需要?jiǎng)?chuàng)建一個(gè)Vue項(xiàng)目

安裝vuex

對(duì)vuex進(jìn)行配置

相關(guān)文章

淺談NUXT - 基于vue.js的服務(wù)端渲染框架

淺談NUXT - 基于vue.js的服務(wù)端渲染框架

淺談Vue 中的組件

淺談使用 Vue 構(gòu)建前端 10w+ 代碼量的單頁(yè)面應(yīng)用開(kāi)發(fā)底層

淺談使用 Vue 構(gòu)建前端 10w+ 代碼量的單頁(yè)面應(yīng)用開(kāi)發(fā)底層

發(fā)表評(píng)論

0條評(píng)論

chaos_G

男|高級(jí)講師

TA的文章

生活需要煙火

安利個(gè)開(kāi)源免費(fèi)流程圖應(yīng)用Draw.io/diagrams，告別Visio/ProcessOn

【簡(jiǎn)單地過(guò)一遍C語(yǔ)言基礎(chǔ)部分】所有知識(shí)點(diǎn)，點(diǎn)到為止?。▋H一萬(wàn)多字）

Quoted-printable編碼的介紹和quopri庫(kù)的使用

JavaScript數(shù)據(jù)類型轉(zhuǎn)換

Codepen 每日精選（2018-4-23）

接了個(gè)新項(xiàng)目

[ 一起學(xué)React系列 -- 12 ] React-Router4 (2)

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

淺談vuex

首先需要?jiǎng)?chuàng)建一個(gè)Vue項(xiàng)目

安裝vuex

對(duì)vuex進(jìn)行配置

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！