先使用vue cli構(gòu)建一個(gè)自己的vue項(xiàng)目

成都創(chuàng)新互聯(lián)公司致力于互聯(lián)網(wǎng)網(wǎng)站建設(shè)與網(wǎng)站營(yíng)銷(xiāo)，提供成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)站開(kāi)發(fā)、seo優(yōu)化、網(wǎng)站排名、互聯(lián)網(wǎng)營(yíng)銷(xiāo)、微信小程序定制開(kāi)發(fā)、公眾號(hào)商城、等建站開(kāi)發(fā)，成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)策劃專家，為不同類(lèi)型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制解決方案，幫助客戶在新的全球化互聯(lián)網(wǎng)環(huán)境中保持優(yōu)勢(shì)。

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

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

現(xiàn)在所有的狀態(tài),也就是變量都放到了test.js中，那我們組件怎么才能獲取到狀態(tài)修值呢？這里有兩個(gè)步驟需要操作

1， vue 提供了注入機(jī)制，就是把我們的store 對(duì)象注入到根實(shí)例中。vue的根實(shí)例就是 new Vue  構(gòu)造函數(shù)，然后在所有的子組件中,this.$store 來(lái)指向store 對(duì)象。在test.js 中，我們export store, 把store已經(jīng)暴露出去了，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: '',
 components: { App }
})

2， 在子組件中,用computed 屬性, computed 屬性是根據(jù)它的依賴自動(dòng)更新的。所以只要store中的state 發(fā)生變化，它就會(huì)自動(dòng)變化。在display.vue 中作下面的更改， 子組件中 this.$store 就是指向store 對(duì)象。我們把 test.js 里面的count 變?yōu)?, 頁(yè)面中就變?yōu)榱?。

3， 通過(guò)computed屬性可以獲取到狀態(tài)值，但是組件中每一個(gè)屬性（如：count）都是函數(shù),如果有10個(gè)，那么就要寫(xiě)10個(gè)函數(shù)，且重復(fù)寫(xiě)10遍return this.$store.state，不是很方便。vue 提供了 mapState 函數(shù)，它把state 直接映射到我們的組件中。

當(dāng)然使用mapState 之前要先引入它。它兩種用法，或接受一個(gè)對(duì)象，或接受一個(gè)數(shù)組。還是在display.vue 組件下。

對(duì)象用法如下：

數(shù)組的方法如下：

4,  還有最后一個(gè)問(wèn)題，如果我們組件內(nèi)部也有computed 屬性怎么辦？它又不屬于mapState 中。那就用到了對(duì)象分割，把mapState函數(shù)生成的對(duì)象再分割成一個(gè)個(gè)的，就像最開(kāi)始的時(shí)候，我們一個(gè)一個(gè)羅列計(jì)算屬性，有10個(gè)屬性，我們就寫(xiě)10個(gè)函數(shù)。

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

否則一直報(bào)錯(cuò)。在頁(yè)面中添加個(gè) p 標(biāo)簽，顯示我們組件的計(jì)算熟悉

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 組件更改后

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

下面看下Vuex中mapState的用法

今天使用Vuex的時(shí)候遇到一個(gè)坑，也可以說(shuō)是自己的無(wú)知吧，折騰了好久，終于發(fā)現(xiàn)自己代碼的錯(cuò)誤了。真是天雷滾滾~~~~~~

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, //訂單產(chǎn)品詳情
 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通過(guò)擴(kuò)展運(yùn)算符將store.state.orderList 映射this.orderList  這個(gè)this 很重要，這個(gè)映射直接映射到當(dāng)前Vue的this對(duì)象上。

所以通過(guò)this都能將這些對(duì)象點(diǎn)出來(lái)，同理，mapActions, mapMutations都是一樣的道理。牢記~~~

總結(jié)

以上所述是小編給大家介紹的vuex state及mapState的基礎(chǔ)用法詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)創(chuàng)新互聯(lián)網(wǎng)站的支持！