如何在页面加载时使用方法？浏览器

Question

我正在使用 Vuex 学习 Vue，我创建了一个名为“llamarJson”的方法，该方法获取 json 数据。我不知道如何在页面加载时使用它。我尝试了很多方法，但找不到解决方案。我正在使用 Vue 和 Vuex。拜托，你能帮帮我吗？

这就是代码 html:

    <!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
    <!-- Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- Vuex -->
    <script src="https://unpkg.com/vuex@3.6.0/dist/vuex.js"></script>
</head>
<body>

    <div id="caja-vue">
        <actividades></actividades>
    </div>
    


    <script src="codigo.js"></script>   
</body>
</html>

这是JS代码：

    //componentes
Vue.component('actividades', {
    template: /*html*/
        `  <div>
            <h1>Hello friend</h1>
                <ul v-for="item of actividades">
                    <li>{{ item.name }}</li>
                </ul>
            </div>
        `,
    computed: {
        ...Vuex.mapState(['actividades'])
    },
    methods: {
        ...Vuex.mapActions(['llamarJson'])
    }
});

//VueEx
const store = new Vuex.Store({
    state: {
        actividades: [],
        programas: []
    },
    mutations: {
        llamarJsonMutation(state, llamarJsonAction){
            state.actividades = llamarJsonAction;
        }
    },
    actions: {
        llamarJson: async function(){
            const data = await fetch('https://jsonplaceholder.typicode.com/users');
            const actividades = await data.json();
            commit('llamarJsonMutation', actividades);
        }
    }
});

//Vue
new Vue({
    el: '#caja-vue',
    store: store
});

Answer 1

你应该为此使用 vue 生命周期挂钩，阅读下面的 link：

Vue life cycle hooks

这些是 vue 钩子：

创建挂钩

beforeCreate(): 事件和生命周期已经初始化但是数据还没有反应

created()：您可以访问响应式但模板和虚拟 DOM 尚未安装或呈现的数据和事件

安装挂钩

beforeMount()：在初始渲染之前运行

mounted()：您可以访问反应式组件、模板和呈现的 DOM

正在更新挂钩

beforeUpdate()：在数据更改之后和 DOM 重新呈现之前运行

updated()：在数据更改并且 DOM 重新呈现后运行

销毁挂钩

beforeDestroy()：在拆卸前运行

destroyed()：在拆除后运行

根据您的需要加载页面（如果您想访问 DOM 或不访问），您可以使用 created() 或 mounted() 挂钩。

只需在您的 vue 组件对象中定义它们并在其中调用您的方法，如下所示：

created() {
  this.someMethod();
}

在您的情况下，您还可以像这样直接从创建的（或任何其他钩子）调用 vuex 操作：

created() {
  this.$store.dispatch('vuexAction');
}

如何在页面加载时使用方法？浏览器

How to use a method on page load? VueX

javascript

vue.js

vuex