存储

框架7附带了一个内置的轻量级应用程序状态管理库 - 存储。它作为应用程序中所有组件的中央存储。

您可以使用特定于库的状态管理库，如Vue的Vuex，React的Redux，以及使用内置的Svelte存储功能。但如果只需要简单的东西，那么框架7存储可能是一个不错的选择。

创建存储

首先，我们需要创建存储。让我们为这个创建一个单独的文件：store.js在这个例子中，我们使用了以下API函数：

// First import createStore function from Framework7 core
import { createStore } from 'framework7';

// create store
const store = createStore({
  // start with the state (store data)
  state: {
    users: [],
    // ...
  },

  // actions to operate with state and for async manipulations
  actions: {
    // context object containing store state will be passed as an argument
    getUsers({ state }) {
      // fetch users from API
      fetch('some-url')
        .then((res) => res.json())
        .then((users) => {
          // assign new users to store state.users
          state.users = users;
        })
    },
    // ...
  },

  // getters to retrieve the state
  getters: {
    // context object containing store state will be passed as an argument
    users({ state }) {
      return state.users;
    }
  }

})

// export store
export default store;

如果你没有使用模块，那么store.js文件将如下所示：

// save store as global object
window.store = Framework7.createStore({
  state: { /* ... */ },
  actions: { /* ... */ },
  getters: { /* ... */ },
})

createStore(

storeParametersstoreParameters)- 创建存储

  • storeParameters - 对象. 带有存储参数的对象

方法返回创建的存储实例

存储参数

现在，让我们看看这个对象：storeParameters对象：

状态

state是包含所有应用程序级别状态的单个对象，并作为“单一事实来源”。这也意味着通常您每个应用程序只有一个存储。单个状态树使其能够轻松找到特定的状态片段，并允许我们轻松地为调试目的对当前应用程序状态进行快照。

动作

actions用于修改状态、异步操作或调用其他存储动作。动作处理程序接收一个包含存储状态和调用其他动作的派发方法的上下文对象。因此，您可以访问context.store来访问状态，或使用context.dispatch.

作为第二个参数，动作处理程序可能会接收任何自定义数据。

为了保持存储的响应性，状态修改应该通过赋值来完成。例如：

// modification of current state property - NOT REACTIVE
state.users.push(...users);

// assignemt to new value - REACTIVE
state.users = [...state.users, ...users];

获取器

getters处理程序用于从存储状态返回数据。当我们需要根据存储状态计算派生状态时，也非常方便，例如通过项目列表进行过滤：

const store = createStore({
  state: {
    users: [
      { id: 1, name: '...', registered: true },
      { id: 2, name: '...', registered: false }
    ]
  },
  getters: {
    registeredUsers: ({ state }) => {
      return state.users.filter((user) => user.registered);
    }
  }
})

获取器处理程序也接收一个上下文对象，但仅包含存储状态。例如，不可能从获取器中调用其他动作。

使用存储

现在我们创建了我们的存储，让我们看看如何使用它。

首先，我们需要将创建的 store 传递给主 App 实例：

// import our store
import store from 'path/to/store.js';

const app = new Framework7({
  // pass store to the app's "store" parameter
  store,
  ...
})

访问存储和状态

可以通过引用我们创建的存储实例直接访问存储（及其状态）：

import store from 'path/to/store.js';

console.log(store.state.users);

或通过访问框架7实例的属性：store派发动作

import store from 'path/to/store.js';

const app = new Framework7({
  store,
  ...
})

// somewhere later
console.log(app.store.state.users);

派发动作

方法。store.dispatch如果我们有以下存储动作：

If we have the following store action:

const store = createStore({
  // ...
  actions: {
    // handler receives custom data in second argument
    getUsers({ state }, { total }) {
      fetch(`some-url?total=${total}`)
        .then((res) => res.json())
        .then((users) => {
          state.users = users;
        })
    },
  },
  // ...
})

我们必须调用store.dispatch方法：

import store from 'path/to/store.js';

// call 'getUsers' actions
store.dispatch('getUsers', { total: 10 })

如果在动作处理程序中，我们想要调用另一个动作处理程序：

const store = createStore({
  // ...
  actions: {
    setLoading({ state }, isLoading) {
      state.isLoading = isLoading;
    },
    // handler context also contains "dispatch" method
    getUsers({ state, dispatch }, { total }) {
      // call other action
      dispatch('setLoading', true);
      fetch(`some-url?total=${total}`)
        .then((res) => res.json())
        .then((users) => {
          state.users = users;
          // call other action
          dispatch('setLoading', false);
        })
    },
  },
  // ...
});

获取器

获取器的值可以作为store.getters对象的静态属性访问。

const store = createStore({
  state: {
    count: 10,
  },
  getters: {
    count({ state }) {
      return state.count;
    },
    double({ state }) {
      return state.count * 2;
    },
  },
});
import store from 'path/to/store.js';

const count = store.getters.count;
const double = store.getters.double;

获取器值是带有.value属性的静态对象，其中包含获取器处理程序的返回结果，所以：

console.log(count.value); // -> 10
console.log(double.value); // -> 20

与状态不同，获取器旨在具有响应性。因此，当您不需要任何响应性时，可以直接访问store.state，否则使用获取器。

使用路由组件

路由组件上下文具有$store具有以下属性的属性：

如果我们有以下存储：

const store = createStore({
  state: {
    users: [],
  },
  actions: {
    getUsers({ state }) {
      // ...
    },
  },
  getters: {
    users({ state }) {
      return state.users;
    }
  },
});

然后，例如，我们应该在路由组件中使用以下内容：

<template>
  <div class="page">
    <ul>
      <!-- getter has value in ".value" property -->
      ${users.value.map((user) => $h`
        <li>${user.name}</li>
      `)}
    </ul>
  </div>
</template>
<script>
  export default (props, { $store, $on }) => {
    // retrieve "users" getter handler value. Initially empty array
    const users = $store.getters('users');

    $on('pageInit', () => {
      // load users on page init
      $store.dispatch('getUsers');
    });

    return $render;
  }
</script>

示例

import { createStore } from 'store';

const store = createStore({
  state: {
    loading: false,
    users: [],
  },
  actions: {
    getUsers({ state }) {
      state.loading = true;
      setTimeout(() => {
        state.users = ['User 1', 'User 2', 'User 3', 'User 4', 'User 5'];
        state.loading = false;
      }, 3000);
    },
  },
  getters: {
    loading({ state }) {
      return state.loading;
    },
    users({ state }) {
      return state.users;
    },
  },
});

export default store;
store_page.f7.html
<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Store</div>
      </div>
    </div>
    <div class="page-content">
      ${users.value.length > 0 ? $h`
      <div class="list list-strong list-outline-ios list-dividers-ios inset-md">
        <ul>
          ${users.value.map((user) => $h`
          <li class="item-content">
            <div class="item-inner">
              <div class="item-title">${user}</div>
            </div>
          </li>
          `)}
        </ul>
      </div>
      ` : $h`
      <div class="block block-strong block-outline-ios inset-md">
        <a href="#" class="button button-fill button-round button-preloader ${loading.value ? 'button-loading' : ''}"
          @click=${loadUsers}>
          <span class="preloader"></span>
          <span>Load Users</span>
        </a>
      </div>
      `}
    </div>
  </div>
</template>
<script>
  export default (props, { $store }) => {
    const loading = $store.getters.loading;
    const users = $store.getters.users;

    const loadUsers = () => {
      $store.dispatch('getUsers');
    };

    return $render;
  };
</script>
改进此文档
在本页上