国产99久久精品_欧美日本韩国一区二区_激情小说综合网_欧美一级二级视频_午夜av电影_日本久久精品视频

最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
當前位置: 首頁 - 科技 - 知識百科 - 正文

vuex state及mapState的基礎用法詳解

來源:懂視網 責編:小采 時間:2020-11-27 22:16:32
文檔

vuex state及mapState的基礎用法詳解

vuex state及mapState的基礎用法詳解:先使用vue cli構建一個自己的vue項目 1.npm i -g vue-cli 2.vue init webpack sell (sell是你的項目名) 3.一路回車(在這個過程中會提示你是否安裝一些依賴包,比如vue-router,es6語法檢查等等,這些根據你個人習慣或者癖好選擇Y/N) 4.npm i
推薦度:
導讀vuex state及mapState的基礎用法詳解:先使用vue cli構建一個自己的vue項目 1.npm i -g vue-cli 2.vue init webpack sell (sell是你的項目名) 3.一路回車(在這個過程中會提示你是否安裝一些依賴包,比如vue-router,es6語法檢查等等,這些根據你個人習慣或者癖好選擇Y/N) 4.npm i

先使用vue cli構建一個自己的vue項目

1.npm i -g vue-cli
2.vue init webpack sell (sell是你的項目名)
3.一路回車(在這個過程中會提示你是否安裝一些依賴包,比如vue-router,es6語法檢查等等,這些根據你個人習慣或者癖好選擇Y/N)
4.npm i (這個是安裝項目的依賴包)
5.npm run dev(啟動你的vue項目) 這個時候如果在頁面上看到了vue的logo說明你的vue的項目基礎構建已經完成,然后你可以刪除掉沒有用的組件
6.webpack sell默認沒有安裝vuex, 所以要安裝vuex; 在命令行中按兩次ctrl+c 結束服務器,npm install  vuex –save  安裝vuex.
7.在你的src目錄下新建一個vue的組件,我們姑且命名為helloVuex(這個命名你自己隨意,開心就好)這個組件主要用來做主容器只展示內容
8.接著新建一個隨便叫什么鬼的組件(這里我就叫display組件吧)用來接受state中的狀態
9.下來我們在src目錄下新建一個文件夾叫做store,在store下面新建一個js文件,叫做test.js(這里的store就是我們的前端數據倉庫)用vuex 進行狀態管理,store 是vuex的核心,所以命名為store 在src 目錄下新建store 文件,在store 目錄下新建test.js 文件(如下)。可以看到使用vuex 之前,要告訴 vue 使用它,Vue.use(Vuex); 我們這里只有一個變量count 需要管理,所以在創建 store 對象的時候,給構造函數傳參,state 下面只有一個count, 且初始化為0。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
 state: {
 count: 0
 }
export default store 

現在所有的狀態,也就是變量都放到了test.js中,那我們組件怎么才能獲取到狀態修值呢?這里有兩個步驟需要操作

    1, vue 提供了注入機制,就是把我們的store 對象注入到根實例中。vue的根實例就是 new Vue  構造函數,然后在所有的子組件中,this.$store 來指向store 對象。在test.js 中,我們export store, 把store已經暴露出去了,new Vue() 在main.js中,所以直接在main.js 中引入store  并注入即可。

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/test'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
 el: '#app',
 router,
 store,
 template: '<App/>',
 components: { App }
})

2, 在子組件中,用computed 屬性, computed 屬性是根據它的依賴自動更新的。所以只要store中的state 發生變化,它就會自動變化。在display.vue 中作下面的更改, 子組件中 this.$store 就是指向store 對象。我們把 test.js 里面的count 變為8, 頁面中就變為了8。

<template>
 <div>
 <h3>Count is {{count}}</h3>
 </div>
</template>
<script>
 export default {
 computed: {
 count () {
 return this.$store.state.count 
 }
 }
 }
</script>

3, 通過computed屬性可以獲取到狀態值,但是組件中每一個屬性(如:count)都是函數,如果有10個,那么就要寫10個函數,且重復寫10遍return this.$store.state,不是很方便。vue 提供了 mapState 函數,它把state 直接映射到我們的組件中。

當然使用mapState 之前要先引入它。它兩種用法,或接受一個對象,或接受一個數組。還是在display.vue 組件下。

  對象用法如下:

<script>
 import {mapState} from "vuex"; // 引入mapState 
 export default {
      // 下面這兩種寫法都可以
 computed: mapState({
 count: state => state.count // 組件內的每一個屬性函數都會獲得一個默認參數state, 然后通過state 直接獲取它的屬性更簡潔 
 count: 'count'         // 'count' 直接映射到state 對象中的count, 它相當于 this.$store.state.count,
 })
 }
</script>

數組的方法如下:

<script>
 import {mapState} from "vuex";

 export default {
 computed: mapState([ // 數組
 "count"
 ])
 }
</script>

4,  還有最后一個問題,如果我們組件內部也有computed 屬性怎么辦?它又不屬于mapState 中。那就用到了對象分割,把mapState函數生成的對象再分割成一個個的,就像最開始的時候,我們一個一個羅列計算屬性,有10個屬性,我們就寫10個函數。

es6中的... 就是分割用的,但是只能分割數組。在ECMAScript stage-3 階段它可以分割對象,所以這時還要用到babel-stage-3;  npm install babel-preset-stage-3 --save-dev, 安裝完全后,一定不要忘記在babelrc 就是babel 的配置文件中,寫入stage-3,

否則一直報錯。在頁面中添加個 p 標簽,顯示我們組件的計算熟悉

babelrc

{
 "presets": [
 ["env", {
 "modules": false,
 "targets": {
 "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
 }
 }],
 "stage-3"
 ],
 "plugins": ["transform-runtime"],
 "env": {
 "test": {
 "presets": ["env", "stage-3"],
 "plugins": ["istanbul"]
 }
 }
}

display.vue 組件更改后

<template>
 <div>
 <h3>Count is {{count}}</h3>
 <p>組件自己的內部計算屬性 {{ localComputed }}</p>
 </div>
</template>
<script>
 import {mapState} from "vuex";
 export default {
 computed: {
 localComputed () {
 return this.count + 10;
 },
 ...mapState({
 count: "count"
 })
 } 
 }
</script>

把test.js 中state.count 改為10,  查看一個效果

下面看下Vuex中mapState的用法

今天使用Vuex的時候遇到一個坑,也可以說是自己的無知吧,折騰了好久,終于發現自己代碼的錯誤了。真是天雷滾滾~~~~~~

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'
import actions from './action'
import getters from './getters'
Vue.use(Vuex)
const state = {
 userInfo: { phone: 111 }, //用戶信息
 orderList: [{ orderno: '1111' }], //訂單列表
 orderDetail: null, //訂單產品詳情
 login: false, //是否登錄
}
export default new Vuex.Store({
 state,
 getters,
 actions,
 mutations,
})

computed: {
 ...mapState([
 'orderList',
 'login'
 ]),
 }, 
 mounted(){ 
 console.log(typeof orderList); ==>undefind
 console.log(typeof this.orderList)==>object
 }

mapState通過擴展運算符將store.state.orderList 映射this.orderList  這個this 很重要,這個映射直接映射到當前Vue的this對象上。

所以通過this都能將這些對象點出來,同理,mapActions, mapMutations都是一樣的道理。牢記~~~

總結

以上所述是小編給大家介紹的vuex state及mapState的基礎用法詳解,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

文檔

vuex state及mapState的基礎用法詳解

vuex state及mapState的基礎用法詳解:先使用vue cli構建一個自己的vue項目 1.npm i -g vue-cli 2.vue init webpack sell (sell是你的項目名) 3.一路回車(在這個過程中會提示你是否安裝一些依賴包,比如vue-router,es6語法檢查等等,這些根據你個人習慣或者癖好選擇Y/N) 4.npm i
推薦度:
標簽: 用法 使用vue ma
  • 熱門焦點

最新推薦

猜你喜歡

熱門推薦

專題
Top
主站蜘蛛池模板: 99久久精品免费国产一区二区三区 | 国产特级毛片aaaaaa高清 | 国产在线精品一区二区三区 | 国产中文字幕在线 | 日韩一区二区三区四区不卡 | 欧美第一夜 | 国产日韩欧美视频 | 在线免费观看国产 | 国内成人自拍 | 日韩欧美第一页 | 亚洲国产精品成人久久 | 91精品一区二区三区在线 | 大陆国产精品视频 | 91精品一区二区 | 精品一区 二区三区免费毛片 | 亚洲色图在线播放 | 亚洲欧美另类在线观看 | a国产精品 | 超级毛片 | 91欧美精品 | 在线视频 日韩 | 国产精品亚洲一区二区三区 | 国产一区二区三区免费 | 欧美一级全黄 | 国产不卡一区 | 欧美高清老少配性啪啪 | 亚洲精品一 | 亚洲国产精品一区二区九九 | 另类区| 国产日韩在线看 | 久久国语精品 | 国产精品亚洲精品观看不卡 | 欧美精品一区二区三区免费播放 | 亚洲第一页在线 | 欧美亚洲国产精品第一页 | 国产成人久久精品二区三区牛 | 精品在线观看免费 | 国产高清不卡一区二区 | 国产精品一区二区午夜嘿嘿嘿小说 | 亚洲视频在线视频 | 国产成人久久 |