vuex封装

本文详细介绍了Vuex在Vue.js应用中的使用流程,包括组件如何通过dispatch触发actions,actions如何commit给mutation,mutation如何更新state,以及如何在组件中获取state。同时,文章还强调了使用常量替代Mutation事件类型的最佳实践。
vuex的使用
1.组件中通过dispatch事件触发actions
    eg:
    methods: {
        事件名: function() {
          this.$store.dispatch("键值名", 需要存储的值);
        },
    }

2.通过actions进行commit提交给mutation
    eg:action.js
    键值名({commit},需要存储的值){
        commit(types.NEWSHOW,需要存储的值);
    },

3.mutation通过mutate给state
    eg:mutation.js
    [types.NEWSHOW](state,需要存储的值){
        state.需要存储的值的名称=需要存储的值;
    },

4.在store.js里进行getter处理
    eg:
    show(state){
      return state.需要存储的值的名称
    },

5.在组件里进行获取
    eg:
    import { mapGetters } from "vuex";
    computed: {
        ...mapGetters(["show"])
      },


6.注意:使用常量替代 Mutation 事件类型
    eg:mutation_type.js
    export const NEWSHOW="NEWSHOW"



eg:目录结构:
    store
        action.js
                    import * as types from './mutation_type'这是全局引入,也可以按需引入
                    export default{
                      newShow({commit},bData){
                        commit(types.NEWSHOW,bData);
                      }
                    }
        mutation.js
                    import * as types from './mutation_type'
                    export default{
                      [types.NEWSHOW](state,bData){
                        state.show=bData;
                      }
                    }
        mutation_type.js
                    export const NEWSHOW="NEWSHOW"
        store.js
                    import Vue from 'vue'
                    import Vuex from 'vuex'
                    import actions from './action'
                    import mutations from './mutation'
                    Vue.use(Vuex)

                    const store = new Vuex.Store({
                      state:{
                        show: false,
                      },
                      actions,
                      mutations,
                      getters:{
                        show(state){
                          console.log(state.show)
                          return state.show
                        }
                    })
                    export default store
Vuex封装公共方法来触发一个 function 可以通过`mutations`或`actions`来实现。 ### 使用`mutations`封装公共方法 `mutations`可以看作是调用`state`的事件,在组件中可以通过`commit`方法调用和响应。以下是结合引用[1]的示例,在`mutations`中封装一个公共方法来触发一个 function: ```javascript //index.js import {createStore} from "vuex"; // 定义要触发的 function function myFunction() { console.log('Function is triggered!'); } const $store = createStore({ // state 可以看作是全局公共的数据,需要的组件可以调用 state: { count: 0, }, getters: {}, // mutations 可以看作是调用 state 的事件,在组件中可以通过 commit 方法调用和响应 mutations: { increment(state, payload) { state.count = state.count + 1; console.log('payload:' + payload); myFunction(); // 触发 function }, }, actions: {}, modules: {} }); export default $store; ``` 在组件中调用这个`mutations`方法: ```vue <template> <button @click="incrementCount">Increment</button> </template> <script> import { useStore } from 'vuex'; export default { setup() { const $store = useStore(); const incrementCount = () => { $store.commit('increment', 'some payload'); }; return { incrementCount }; } }; </script> ``` ### 使用`actions`封装公共方法 `actions`通常用于处理异步操作,也可以用来封装公共方法触发 function。以下是示例: ```javascript //index.js import {createStore} from "vuex"; // 定义要触发的 function function myFunction() { console.log('Function is triggered!'); } const $store = createStore({ state: { count: 0, }, getters: {}, mutations: { increment(state, payload) { state.count = state.count + 1; console.log('payload:' + payload); }, }, actions: { triggerFunction(context, payload) { myFunction(); // 触发 function context.commit('increment', payload); } }, modules: {} }); export default $store; ``` 在组件中调用这个`actions`方法: ```vue <template> <button @click="triggerFunction">Trigger Function</button> </template> <script> import { useStore } from 'vuex'; export default { setup() { const $store = useStore(); const triggerFunction = () => { $store.dispatch('triggerFunction', 'some payload'); }; return { triggerFunction }; } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值