溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
先使用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>
<h4>Count is {{count}}</h4>
</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>
<h4>Count is {{count}}</h4>
<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的基礎用法詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
