npm install vuex --save
在src下创建store文件夹,在store文件夹下创建index.js:
引入即可使用:
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //定义仓库数据 const state = { num:0, } //判断仓库数值 const getters = { run(state){ if(state.num>5){ state.num = 5; alert("只能购买五件哦"); } }, } //定义仓库方法 const mutations = { btn(){ state.num+=1; }, clean(){ state.num=0; } } //固定格式,需要导出的公共数据 export default new Vuex.Store({ state,getters,mutations })
components下的两个组件页面:
<template> <div> <mt-header fixed title="首页"></mt-header> <button @click="btn" class="container">加入购物车</button> {{num}}{{run}} </div> </template> <script> import store from '../store/index' //调用仓库里的谁 import {mapState,mapGetters,mapMutations} from 'vuex' export default { data(){ return{ } }, computed:{ ...mapState(["num"]), ...mapGetters(['run']), }, methods:{ ...mapMutations(['btn']), }, //挂载store store } </script> <style scoped> .container{ margin-top: 40px; } </style>
<template> <div> <mt-header fixed title="购物车"></mt-header> <button @click="clean" class="container">一键清空</button> {{num}} </div> </template> <script> import store from '../store/index' import {mapState,mapMutations} from 'vuex' export default { name: "FavView", computed:{ ...mapState(['num']) }, methods:{ ...mapMutations(['clean']), }, //挂载store store } </script> <style scoped> .container{ margin-top: 70px; } </style>