首頁 > web前端 > js教程 > vuex state+mapState實戰項目解析

vuex state+mapState實戰項目解析

php中世界最好的语言
發布: 2018-06-07 11:40:09
原創
1794 人瀏覽過

這次帶給大家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 (這個是安裝專案的依賴套件)
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>
 <p>
  <h3>Count is {{count}}</h3>
 </p>
</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>
 <p>
  <h3>Count is {{count}}</h3>
  <p>组件自己的内部计算属性 {{ localComputed }}</p>
 </p>
</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对象上。

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

如何操作Vue做出proxy代理

使用jquery获取上传文件具体内容

以上是vuex state+mapState實戰項目解析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板