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

資訊專欄INFORMATION COLUMN

vue 項目實戰(zhàn) (vue全家桶之--- vuex)

番茄西紅柿 / 1632人閱讀

摘要：官方文檔對的解讀是是一個專為應用程序開發(fā)的狀態(tài)管理模式。而就是為了解決這樣的問題，把組件的共享狀態(tài)抽取出來，以一個全局單例模式管理。我們還可以傳入?yún)?shù)傳入一個對象可以修改中的狀態(tài)，但是并不是說隨隨便便修改的比如說

老規(guī)矩先安裝

npm install vuex --save

在看下面內(nèi)容之前 你應該大概的看了一邊vuex官方的文檔對vuex有個大概對了解

首先

vuex 是什么？

vuex 是屬于vue中的什么，它在項目中扮演著一個什么樣的角色，起到什么作用，在項目中我是否要用到vuex。

官方文檔對vuex的解讀是：Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式。

如果你是在開發(fā)一個大型的應用程序，組件與組件之間，兄弟組件之間，或者說多層嵌套組件之間，你是無法傳遞數(shù)據(jù)的。子父組件之間，也只是說通過事件保持數(shù)據(jù)的一致性，也是很繁瑣的，會變得很不好管理。而vuex就是為了解決這樣的問題，把組件的共享狀態(tài)抽取出來，以一個全局單例模式管理。組件樹構(gòu)成了一個巨大的“視圖”，不管在樹的哪個位置，任何組件都能獲取狀態(tài)或者觸發(fā)行為，而且代碼將會變得更結(jié)構(gòu)化且易維護。

新建一個最簡單的store

store.js

import Vue from vue
import Vuex from vuex

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0,
    me: {
      name: huangenai,
      age: 22,
      sex: 女
    },
      list: [{name: hea, age: 22}, {name: cpq, age: 23}] 
  },
  mutations: {
    increment (state) {
      state.count++
    }
  }
})

main.js

import store from ./store.js

new Vue({
  el: #app,
  router,
  store,//加這個
  components: { App },
  template: <App/>
})

State

驅(qū)動應用的數(shù)據(jù)源,組件之間共享的狀態(tài)。

上面代碼中的 count 就是一個共享的數(shù)據(jù)，me 也是一個共享的數(shù)據(jù)對象。

在組件中獲得state 中的count

this.$store.state.count

newvue.vue

<template>
    <div>
        new vue page
        <p>{{count}}p>
    div>
template>

<script>
export default {
  name: newvue,
  data () {
    return {
    }
  },
  computed: {
    count () {
      return this.$store.state.count
    }
  }
}
script>

<style scoped>
style>

為什么要寫在computed 里面呢，而不是寫在data里面，因為當state.count 變化的時候, 都會重新求取計算屬性，并且觸發(fā)更新相關(guān)聯(lián)的 DOM,如果你不理解可以先去看看computed

當一個組件要引用到多個狀態(tài)的時候 ，一個個寫是不是很累。不用擔心，我們有mapState 輔助函數(shù)幫助我們生成計算屬性。

在組件中引用

import { mapState } from vuex
<template>
    <div>
        <p>{{count}}p>
        <p>{{countPlusLocalState}}p>
        <p>sex: {{sex}}p>
        <p>age: {{myAge}}p>
        <p>name: {{name}}p>
    div>
template>

<script>
import { mapState } from vuex
export default {
  name: newvue,
  data () {
    return {
      localCount: 1
    }
  },
  computed: {
    ...mapState({
      // 箭頭函數(shù)可使代碼更簡練
      sex: state => state.me.sex,
      myAge: state => state.me.age,
      name: state => state.me.name,
      // 傳字符串參數(shù) age 等同于 `state => state.age`
      count: count,
      // 為了能夠使用 `this` 獲取局部狀態(tài)，必須使用常規(guī)函數(shù)
      countPlusLocalState (state) {
        return state.count + this.localCount
      }
    })
  }
}
script>

<style scoped>
style>

假設computed 里面還有別的數(shù)據(jù)，因為mapstate返回來的是一個對象所以我們這樣寫可以將數(shù)據(jù)混入

computed: {
  localComputed () { /* ... */ },
  // 使用對象展開運算符將此對象混入到外部對象中
  ...mapState({
    // ...
  })
}

Mutation

你說你想修改state的值，this.$store.state.count = 1 這樣可不可以 no no no....  所以就有了Mutation。

切記Mutation 必須是同步函數(shù)?。。?/h3>

想要修改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation。

在上面代碼我們新建一個store里面下的 有一個increment，就可以實現(xiàn)修改state里面的count

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count ++
    }
  }
})

那么如何調(diào)用increment呢？？

調(diào)用 this.$store.commit(type)  類型叫increment 的 mutation。

this.$store.commit(increment)

我們還可以傳入?yún)?shù)

// ...
mutations: {
  increment (state, n) {
    this.$state.count = n
  }
}

store.commit(increment, 10)

傳入一個對象

mutations: {
  increment (state, data) {
    state.count += data.count
  }
}
store.commit(increment, {
  count: 10
})

mutations可以修改store中的狀態(tài)，但是并不是說隨隨便便修改的,比如說

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

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

相關(guān)文章

  • JS中bind、call和apply的作用以及在TS裝飾器中的用法

    摘要：目錄，前言，，例子，直接調(diào)用，將指向另一個對象，傳遞參數(shù)，，例子，直接調(diào)用，將指向另一個對象，傳遞參數(shù)，合并數(shù)組，，例子，直接調(diào)用，將指向另一個對象，傳遞參數(shù)，中裝飾器使用，總結(jié)，相同點，不同點，前言，前言和在函數(shù)式編程時候非常有用，本? 目錄 1，前言 1，call 1.1，例子 1.2，直接調(diào)用 1.3，將this指向另一個對象 1...

    happyfish 評論0 收藏0

  • 前方來報，八月最新資訊--關(guān)于vue2&3的最佳文章推薦

    摘要：哪吒別人的看法都是狗屁，你是誰只有你自己說了才算，這是爹教我的道理。哪吒去他個鳥命我命由我，不由天是魔是仙，我自己決定哪吒白白搭上一條人命，你傻不傻敖丙不傻誰和你做朋友太乙真人人是否能夠改變命運，我不曉得。我只曉得，不認命是哪吒的命。 showImg(https://segmentfault.com/img/bVbwiGL?w=900&h=378); 出處 查看github最新的Vue...

    izhuhaodev 評論0 收藏0

  • Vue學習日記（一）——Vue介紹

    摘要：的核心庫只關(guān)注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。的目標是通過盡可能簡單的實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。并不是框架，只是和他旁邊的生態(tài)環(huán)境組成了一個框架，下面，貼一個官方的漸進式框架介紹圖吧，方便理解。 前言 本人學習了一段時間的vue，并嘗試寫了一些小Demo之后，將vue投入了幾個項目之后，一直在邊學習邊使用，經(jīng)過看了vue,vuex,vue-route...

    王晗 評論0 收藏0

  • Vue學習日記（一）——Vue介紹

    摘要：的核心庫只關(guān)注視圖層，并且非常容易學習，非常容易與其它庫或已有項目整合。的目標是通過盡可能簡單的實現(xiàn)響應的數(shù)據(jù)綁定和組合的視圖組件。并不是框架，只是和他旁邊的生態(tài)環(huán)境組成了一個框架，下面，貼一個官方的漸進式框架介紹圖吧，方便理解。 前言 本人學習了一段時間的vue，并嘗試寫了一些小Demo之后，將vue投入了幾個項目之后，一直在邊學習邊使用，經(jīng)過看了vue,vuex,vue-route...

    MasonEast 評論0 收藏0

  • 酷狗音樂- Vue / React 全家桶的兩種實現(xiàn)

    摘要：引言兩個月前用全家桶實現(xiàn)過一次酷狗音樂，最近又用全家桶重構(gòu)了下，最終成果和的實現(xiàn)基本一致，放個圖手機預覽戳版本版本。的行為結(jié)構(gòu)表現(xiàn)分離，很明顯，而的分離雖然不是很明顯，但實際上也是有的。發(fā)送指令，最終會到里合并數(shù)據(jù)，與中的類似。 引言 兩個月前用 Vue 全家桶實現(xiàn)過一次 酷狗音樂，最近又用 React 全家桶重構(gòu)了下，最終成果和 Vue的實現(xiàn)基本一致，放個圖： showImg(htt...

    hot_pot_Leo 評論0 收藏0

發(fā)表評論

0條評論

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