vue高实3--vuerouter与vuex

通过vue router把页面拆解 独立开来，页面独立开来难免有  数据公用的情况，这需要 使用vuex 进行数据的全局状态管理

main.js:

import Vue from "vue";

import ElementUI from "element-ui";

import "element-ui/lib/theme-chalk/index.css";

import App from "./App.vue";

import store from "./store";

import router from "./router";

Vue.use(ElementUI);

Vue.config.productionTip = false;

 

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount("#app");

 

App.vue:

 

 

 

h1 {

  color: red;

}

.image {

  width: 100%;

}

 

路由页面： Cart.vue  Home.vue

view>Cart.vue:

 

 

view>Home.vue:

 

 

 

commopent>Cart.vue

router.js

import Vue from "vue";

import VueRouter from "vue-router";

import Cart from "./view/Cart";

import Home from "./view/Home";

 

Vue.use(VueRouter);

 

let router = new VueRouter({

  routes: [

    {

      path: "/",

      component: Home,

      name: "home"

    },

    {

      path: "/cart",

      component: Cart,

      name: "cart"

    }

  ]

});

 

export default router;

store.js 

import Vue from "vue";

import Vuex from "vuex";

Vue.use(Vuex);

export default () => {

  const store = new Vuex.Store({

    state: {

      cart: JSON.parse(localStorage.getItem("cart")) || [ ] // 有则从localStorage取。没有则置为[]

    },

    mutations: {

      cartadd(state, index) {

        state.cart[index].count += 1;

      },

      cartreduce(state, index) {

        if (state.cart[index].count > 1) {

          state.cart[index].count -= 1;

        }

      },

      addcart(state, item) {

        let good = state.cart.find(v => v.title == item.title);

        if (good) {

          good.count += 1;

        } else {

          state.cart.push({ ...item, count: 1 });

        }

      }

    },

    getters: { //依赖state 衍生出来

      cartTotal: state => {

        let sum = 0;

        state.cart.forEach(v => {

          sum += v.count;

        });

        return sum;

      },

      cartTotal2: state => {

        let sum = 0;

        state.cart.forEach(v => {

          sum += v.count + 1;

        });

        return sum;

      }

    }

  });

 

  store.subscribe((mutations, state) => { //订阅 监听到state变化在localStorage存cart

    localStorage.setItem("cart", JSON.stringify(state.cart));

  });

  return store;

};

// export default store;