VUEX

2020-05-20  本文已影响0人  刘松阳

main.js 中引入vuex
import vuex from 'vuex'
Vue.use(vuex )
new Vue({
// 写入store 共享仓库
store,
render: h => h(App)
}).$mount('#app')

创建一个store 文件夹 下 index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
//date 放值
state: {

  name:0,
  showa:0,
  nmu:0

},
//computed
getters:{
showa(state){
return state.showa=state.name+5;
}
},
//methods 放置方法
mutations: {
showaa(state){
return state.name=+20;
}
},
actions: {

},
modules: {
}
})

组件中调用 {{$store.state.name}}

mapState 映射
导入
impot {mapState} from 'vuex'
computed:{
...mapState(["name"])
}
{{name}} //打印输出

import {mapGetters} from 'vuex'

computed:{

...mapGetters(["showa"])

},
{{showa}} //打印输出

mutations: {
showaa(state){
return state.name++;
}
},
shAS(){
this.$store.commit('showaa',{num:5}) 值是mutations 的函数名 传递参数为对象
}

<div @click="showaa">ok</div>
import {mapMutations} from 'vuex'
methods: {
...mapMutations(["showaa"])
}

actions: {
Delay(){
return delCategory().then((res)=>{console.log(res) })
}

},

import {mapActions} from 'vuex'
methods: {
...mapActions(["Delay"])
}
created(){
this.Delay()
},

上一篇下一篇

猜你喜欢

热点阅读