Vuex的安装、搭建及案例详解

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import store from './store'
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

<template>
    <div>
        <h1>当前的值是:{{sum}}</h1>
        <button @click="addSum">点我加1</button>
        <button>点我减1</button>
    </div>
</template>
 
<script>
export default {
    name:"Coute",
    methods:{
        addSum()
        {
            this.$store.dispatch('addSum',1);
        }
    },
    computed:{
        sum()
        {
            return this.$store.state.sum;
        }
    }
}
</script>
 
<style>
    button{
        margin-right: 2px;
    }
</style>

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const state = {
    sum:1
};
const mutations={
    ADDSUM(state,value)
    {
        state.sum+=value;
    }
};
const actions={
    addSum(context,value)
    {
        context.commit('ADDSUM',value);
    }
};
export default new Vuex.Store({
    state,
    mutations,
    actions
})

import Vuex from 'vuex'
import Vue from 'vue'
Vue.use(Vuex)
const state = {
    sum:1
};
const mutations={
    ADDSUM(state,value)
    {
         state.sum+=value
    }
};
const actions={
    addSum({commit},value)
    {
         commit('ADDSUM',value)
    }
};
const getters = {
    bigSum(state)
    {
        return state.sum*20
    }
}
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})

<template>
  <div>
      <h1>姓名:{{name}}</h1>
      <h1>学校:{{school}}</h1>
      <h1>爵位:{{Marquis}}</h1>
  </div>
</template>
 
<script>
export default {
    name:'Information',
    computed:{
        school()
        {
            return this.$store.state.school;
        },
        sum()
        {
            return this.$store.state.sum;
        },
        name()
        {
            return this.$store.state.name;
        },
        Marquis()
        {
            return this.$store.state.Marquis;
        }
    }
}
</script>
 
<style>
 
</style>

import Vue from 'vue'
import App from './App.vue'
import Vuex from 'vuex'
Vue.use(Vuex)
Vue.config.productionTip = false
import store from './store'
new Vue({
  render: h => h(App),
  store
}).$mount('#app')

import Vuex from 'vuex'
 
const state = {
   
};
const mutations={
    
};
const actions={
    
};
const getters = {
    
}
export default new Vuex.Store({
    state,
    mutations,
    actions,
    getters
})