Vuex基本应用 简单案例

最终效果

结构：

安装Vuex：

npm install vuex --save

在src下创建store文件夹，在store文件夹下创建index.js：

 

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下的两个组件页面：

HomeView.vue首页页面全部内容：

<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>

FavView.vue购物车页面全部内容：

<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>