VUEX

作者: 刘松阳 | 来源:发表于2020-05-20 13:36 被阅读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()
    },

    相关文章

      网友评论

          本文标题:VUEX

          本文链接:https://www.haomeiwen.com/subject/fxrxrhtx.html