使用Django和Vue创建看板应用程序(3)

您所在的位置：网站首页 › vue添加class › 使用Django和Vue创建看板应用程序(3)

使用Django和Vue创建看板应用程序(3)

2023-03-02 15:16| 来源: 网络整理| 查看: 265

状态。不得包含异步处理 td> tr> tbody> table>

在许多情况下，

组件调用Action，将结果报告给Mutation，并更新State。我们将在实施它的同时进一步研究这一领域。

另外，由于无法按原样使用此商店，因此请在全局商店(store / index.js)中注册它。

应用程序/ vuejs / src / store / index.js

123456789101112131415 import Vuex from 'vuex'; import createLogger from 'vuex/dist/logger'; +import header from './header'; Vue.use(Vuex); @@ -11,6 +12,7 @@ export default new Vuex.Store({ ? [createLogger()] : [], modules: { + header, }, state: { },

之后，我们将实现Header Store。

使用商店

中的API客户端

考虑到

标头的存储，似乎有必要保留获取的帐户信息，因此在State中准备一个框架。

vuejs / src / store / header.js

123const state = { accountInfo: null, };

您可以看到，要将值设置为此accountInfo，请执行本次创建的KanbanClient(APIClient)的getAccountInfo。由于此过程是异步过程，因此包含在Action中。

vuejs / src / store / header.js

123456const actions = { async fetchAccountInfo({ commit }) { const accountInfo = await KanbanClient.getAccountInfo(); commit('setAccountInfo', accountInfo); }, };

commit('setAccountInfo', accountInfo);部分表示所获得的accountInfo用于调用突变setAccountInfo。因此，我们还将实现突变。

vuejs / src / store / header.js

12345const mutations = { setAccountInfo(state, accountInfo) { state.accountInfo = accountInfo; }, };

只需将接收到的accountInfo设置为state.accountInfo。现在，当您调用fetchAccountInfo时，您就有了从API获取登录信息并将其反映在商店中的代码。

使用组件

中的操作

初始化MyHeader时，将调用之前创建的动作。首先，准备mapState,mapActions来分配Store的值，就像组件本身的属性一样。

应用程序/ vuejs / src /组件/布局/ MyHeader.vue

1234567 +import { createNamespacedHelpers } from 'vuex'; + +const { mapState, mapActions } = createNamespacedHelpers('header'); export default { name: 'MyHeader',

createNamespacedHelpers('header')获得一个辅助函数mapState, mapActions来很好地处理存储值header。 mapState用于映射商店的状态，mapActions用于与商店的动作进行映射。然后使用这些助手。

应用程序/ vuejs / src /组件/布局/ MyHeader.vue

12345678910111213 export default { name: 'MyHeader', + computed: { + isLoggedIn() { + return this.accountInfo !== null; + }, + ...mapState(['accountInfo']), + }, + methods: { + ...mapActions(['fetchAccountInfo']), + }, };

在computed中使用

mapState，在methods中使用mapActions。您将收到一个数组，其中包含要分配为字符串的商店的属性名称。在此，指定state. accountInfo和state. fetchAccountInfo。另外，定义一个名为isLoggedIn的方法，该方法返回accountInfo是否为空以指示您是否已登录。

请注意，...被称为散布运算符，其行为类似于扩展和分配指定的变量。

例

123456> a = {a:1} { a: 1 } > b = {b:2, a} { b: 2, a: { a: 1 } } > b = {b:2, ...a} { b: 2, a: 1 } // aが展開されている

现在我们已经分配了，我们将使用它。通过如下所示用created调用fetchAccountInfo，该MyHeader组件将在初始化时执行。

应用程序/ vuejs / src /组件/布局/ MyHeader.vue

123456789101112131415export default { name: 'MyHeader', computed: { isLoggedIn() { return this.accountInfo !== null; }, ...mapState(['accountInfo']), }, methods: { ...mapActions(['fetchAccountInfo']), }, created() { this.fetchAccountInfo(); }, };

最后，使用获取的值等进行显示。

应用程序/ vuejs / src /组件/布局/ MyHeader.vue

12345678910111213141516@@ -1,9 +1,13 @@ - Django + KANBAN - + + Welcome to {{ accountInfo.name }} + Logout + + Register

根据

v-if="isLoggedIn"，如果您已经登录，则会收到诸如Welcome to test的消息和一个注销按钮，否则，您将获得Regsiter / Login链接。

如果再次访问http://localhost:3000/，并且登录帐户名显示如下，则说明成功。

下次

https://qiita.com/denzow/items/32b87ab6fe0c78a04cbd

【本文地址】

使用Django和Vue创建看板应用程序(3)

使用Django和Vue创建看板应用程序(3)

今日新闻

推荐新闻