例子:
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>