...mapState,...mapMutations使用
1.新建store仓库。这里我是把store单独抽离出来,放在store.js里:import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)var store = new Vuex.Store({state:{car:'ha'},mutations:{addToCar(sta...
·
1.新建store仓库。
这里我是把store单独抽离出来,放在store.js里:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
var store = new Vuex.Store({
state:{
car:'ha'
},
mutations:{
addToCar(state,info){
state.car = info
}
},
getters:{
}
})
export default store
2.main.js中:
import store from './store'
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>',
store
})
3.现在就可以开始使用了:
/1mapState使用:
import {mapState} from 'vuex'
computed:{
...mapState({
// car:'car',//最简单的写法
car:state=>state.car//也可以这样写
})
},
//如果要监听car的数据改变,可以结合watch来使用。methods方法中也可以通过this.car访问到。
/2mapMutations使用:
import {mapMutations} from "vuex";
methods: {
...mapMutations(["addToCar"]),//映射成this.addToCar
cz() {
this.addToCar("change");
}
},
更多推荐
已为社区贡献4条内容
所有评论(0)