vuex

使用案例

• 文件目录

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

• main.js

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

• 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'])
   },