vuex 的基本配置,

建一个 store 文件,index.js 文件中

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 准备 actions 用于响应组件中的动作
const actions = {}
// 准备 mutations 用于操作数据(state)
const mutations = {}
// 准备 state 用于存储数据
const state = {}
// 
export default new Vuex.Store({
	actions,
	mutations,
	state
})
  1. # 在页面调用 dispatch
    <template>
    	<div>
    		<h2>当前求和为</h2>
    		<button @click="add">+</button>
    	</div>
    </template>
    <script>
    	export default {
    		name: 'Student',
    		data() {
    			return {
    				n: 1
    			}
    		},
    		mounted() {},
    		methods: {
    			add() {
    				this.$store.dispatch('jia', n)
    			}
    		},
    	}
    </script>
  2. # 在 store 的 index.js 中 actions 中注册 jia 方法
    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    // 准备 actions 用于响应组件中的动作
    const actions = {
    	jia() {
    		console.log('jia被调用了')
    	}
    }
    // 准备 mutations 用于操作数据(state)
    const mutations = {}
    // 准备 state 用于存储数据
    const state = {
    	sum: 0
    }
    // 
    export default new Vuex.Store({
    	actions,
    	mutations,
    	state
    })

    点击查看控制台输出

    点击 +,actions 中的方法被调用。

    actions 中的方法有两个参数,打印参数

  3. 在 mutations 中写方法,一般在 actions 中调用 commit 方法时,要大写方法名,对应 mutations 中也大写方法名

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)
    // 准备 actions 用于响应组件中的动作
    const actions = {
    	jia(context, value) {
    		context.commit('JIA', value)
    	}
    }
    // 准备 mutations 用于操作数据(state)
    const mutations = {
    	JIA() {
    		console.log('mutations中的JIA被调用了')
    	}
    }
    // 准备 state 用于存储数据
    const state = {
    	sum: 0
    }
    // 
    export default new Vuex.Store({
    	actions,
    	mutations,
    	state
    })

    控制台输出,

    mutations 中的函数也会有两个参数,打印参数,观察输出

  4. #
更新于