vuex的基礎(chǔ)使用以及四個map方法和xuex模塊化和命名空間總結(jié)
上一篇簡單的和大家介紹了關(guān)于，在本篇我會給大家介紹一下關(guān)于vue中關(guān)于vuex的部分基本上已經(jīng)說玩了，如果后續(xù)vue可能存在版本更替技術(shù)迭代等等的事情，后面我也是會繼續(xù)和大家分享關(guān)于我掌握的這部分技術(shù)。開始我們本篇的總結(jié)，在我看來感覺上vuex就是把平時在寫vue項目中的script標(biāo)簽的大部分代碼給提了出去，當(dāng)然不只是提了出去還把他共享了出去。
本來呢是這樣的
現(xiàn)在呢是這樣的
下面我就和大家講講這就vuex的主要的內(nèi)容如：
### 搭建vuex環(huán)境
1. 創(chuàng)建文件：```src/store/index.js```
```js
//引入Vue核心庫
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
//應(yīng)用Vuex插件
Vue.use(Vuex)
//準(zhǔn)備actions對象——響應(yīng)組件中用戶的動作
const actions = {}
//準(zhǔn)備mutations對象——修改state中的數(shù)據(jù)
const mutations = {}
//準(zhǔn)備state對象——保存具體的數(shù)據(jù)
const state = {}
//創(chuàng)建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
```
2. 在```main.js```中創(chuàng)建vm時傳入```store```配置項
```js
......
//引入store
import store from './store'
......
//創(chuàng)建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
```
### 四個map方法
mapActions 方法生成關(guān)于actions文件中的數(shù)據(jù)
mapMutations 方法生成關(guān)于mutations文件中的數(shù)據(jù)
mapState 方法生成關(guān)于state文件中的數(shù)據(jù)
mapGetters 方法生成關(guān)于 getters 文件中的數(shù)據(jù)
主要當(dāng)不使用mapGetters方法操作getters的時候 想觸發(fā)里面的東西需要在路徑中加 ` / ` 例如： `return this.$store.getters['personAbout/firstPersonName']`而其它就是`return this.$store.state.xxx`
### xuex模塊化和命名空間
：需要在每個模塊的配置中添加`namespaced:true,`
```js
//求和相關(guān)的配置
export default {
namespaced:true,
actions:{
·····
},
mutations:{
·····
},
state:{
·····
},
getters:{
·····
},
}
```
引入的時候添加一個 `modules`模塊 ?在其它組件獲取時候
第一種方式 ：`this.$store.state.personAbout.personList`
第二中方式 ： `...mapState('personAbout',['personList']),`
```js
以及在index人口引入
//該文件用于創(chuàng)建Vuex中最為核心的store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
import countOptions from './count'
import personOptions from './person'
//應(yīng)用Vuex插件
Vue.use(Vuex)
//創(chuàng)建并暴露store
export default new Vuex.Store({
modules:{
countAbout:countOptions,
personAbout:personOptions
}
})
```
Vue
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時內(nèi)刪除侵權(quán)內(nèi)容。
相關(guān)文章
