例子:
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都是一樣的道理。牢記~~~
import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
export default new Vuex.Store({
state:{
data:'test'
},
getters:{
},
mutations:{
},
actions:{
}
})
<template>
<div id="app">
{{count}}
//{{data}}
</div>
</template>
<script>
//想要使用 首先需要按需引入
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
// 通過對象展開運算符將count混入computed對象中,作爲computed對象的方法使用
computed:{
//相當於
// count(){
// return this.$store.state.data
// }
//採用對象方式相當於重命名
...mapState({
count: 'data'
})
//採用數組方式
//...mapState([data])
//可在其他鉤子中使用this.data調用
}
//其他mapGetters,mapMutations,mapActions原理一樣
}
</script>
<style>
</style>
另外mapState通過擴展運算符將store.state.data映射this.count 這個this 很重要,這個映射直接映射到當前Vue的this對象上。
在鉤子函數中可直接 this.count調用
當state,mutations,actions數量很多時,在一個文件夾下不方便管理。可把state,getters,mutations,actions分別寫在不同文件內,通過export 導出。再在一個文件中引入。
例如:
//state.js
const state={
count:10
}
export default state; //切記記得導出
//getters.js
export const gets= state => state.count
//這裏直接導出 就不用export default
相當於 gets=function(state){
return state.count
}
//mutations.js
const mutations={
add(state){
state.count+=1
},
sub(state){
state.count-=1
}
}
export default mutations;
//actions.js
export const addactions=(context)=>{
context.commit('add')
}
export const subactions=(context)=>{
context.commit('sub')
}
所有文件導出後在一個文件內統一引入
//store文件夾下的store.js
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
//由於上邊的getters.js 和actions.js是通過export 導出每一個,
import * as getters from './getters.js'
import mutations from './mutations.js'
import * as actions from './actions.js'
Vue.use(Vuex)
export default new Vuex.Store({
state,
getters,
mutations,
actions
})
使用
<template>
<div id="app">
<div>數量{{count}}</div>
<div @click="add">增加</div>
<div @click="sub">減少</div>
</div>
</template>
<script>
import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'
export default {
computed:{
//注意這裏可以直接使用,因爲通過...mapxxx引進來,因爲是state,所以可以直接當對象的屬性使用,若是mutations,actions則當對象的方法使用。
...mapState(["count"])
},
methods:{
...mapMutations(["add","sub"])
}
}
</script>