vuex

2019052010484836.png

• 使用案例

  • 文件目录

    
    
    截屏2020-03-22下午2.49.57.png

  • main.js

    import store from '@/components/autoTestPaper/store'
    new Vue({
        el: '#app',
        router,
        store,
        components: {App},
        template: ''
    })
    

  • index.js

    import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state'
    import mutations from './mutations'
    import actions from './actions'
    Vue.use(Vuex);
    export default new Vuex.Store({
        state,
        actions,
        mutations
    })
    

  • state.js

    export default {
        testBasketList: (localStorage.getItem("testBasketList") && localStorage.getItem("testBasketList") != []) ?
            JSON.parse(localStorage.getItem("testBasketList")) : {}
    }
    

  • actions.js

    export default {
        changeTestBasketList(ctx, list) {
            ctx.commit('changeTestBasketList', list)
        }
    }
    

  • mutations.js

    export default {
        changeTestBasketList(state, list) {
            localStorage.setItem("testBasketList",         JSON.stringify(list));
       state.testBasketList =    JSON.parse(localStorage.getItem("testBasketList"));
        }
     }
    

• 调用

   import {mapState} from 'vuex';
   computed: {
         ...mapState(['testBasketList'])
     },