zoukankan      html  css  js  c++  java
  • <vuex第四弹>vuex之modules(前端网备份)

    模块化,只针对于超大型项目
    index.js
    import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
    const state = {
    count:44
    }
    const mutations ={
    jia(state,n){
    state.count+=n.a;
    },
    jian(state){
    state.count--
    }
    }
    //vue 2.0官方建议在computed里面的不使用箭头函数,因为箭头函数的this 指向上一层,而function的this指向本层
    const getters={
    count:function(state){
    return state.count+=100
    }
    }
    const actions={
    //context在actions里面代表着整个的store
    jiaplus(context){
    context.commit('jia',{a:1});
    setTimeout(() => {
    context.commit('jian');
    }, 1000);
    console.log('我先被执行了')
    },
    jianplus({commit}){
    commit('jian')
    }
    }
    const moduleA = {
    state,
    mutations,
    getters,
    actions
    }
    const moduleB = {
    state:{
    count:144
    }
    }
    export default new Vuex.Store({
    modules:{
    a:moduleA,
    b:moduleB
    }
    })
    vue

    <style>
    p button{
    50px;
    }
    </style>
    <template>
    <div>
    <div>
    {{$store.state.a.count}}-{{count}}-{{$store.state.b.count}}
    </div>
    <p>
    </p>
    </div>

    </template>

    <script>
    export default {
    name:'te',
    data(){
    return{
    counts:0
    }
    },
    computed: {
    count () {
    return this.$store.state.a.count+1
    }
    },
    methods:{
    }
    }
    </script>
    比如是app模块下的state的roleName,读取的时候2种写法,可以看到辅助函数更麻烦

    import { mapState  } from 'vuex'        
    computed: {
                ...mapState({
                    "roleName": state => state.app.roleName 
                }),
    //          roleName () {
    //          return this.$store.state.app.roleName
    //          }
              },
  • 相关阅读:
    个人博客作业-软件案例分析1 博客园和CSDN
    第一次结对项目
    个人项目作业(1)
    个人博客作业(1)
    第一次个人作业
    面向对象第四单元总结和期末总结
    面向对象第三单元总结
    面向对象第二单元总结
    UML——BUAA_OO 第四单元总结 & 课程总结
    JML——BUAA_OO 第三单元总结
  • 原文地址:https://www.cnblogs.com/lsc-boke/p/10997233.html
Copyright © 2011-2022 走看看