介绍
vuex-turbolinks 是一个基于 Vue.js 和 Turbolinks 的插件，用于在 Turbolinks 流转时自动清空你的 Vuex 状态树。它可以很好地解决 Turbolinks 下 Vuex 数据的存储和管理问题。
安装
你可以通过 npm 或者 yarn 安装 vuex-turbolinks
npm install vuex-turbolinks --save #or yarn add vuex-turbolinks
使用
第一步：在你的 main.js 中引入，注册
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
------ ----------------- ---- -----------------
-------------
----- ----- - --- ------------
-- -- ---- --
-------- -
-------------------
-
--第二步：使用
你需要在你的组件中使用 $store.state 或者 $store.getters 来访问一些状态数据，例如：
-- -------------------- ---- -------
------ ------- -
--------- -
------ -
------ ----------------------
-
--
-------- -
------------------ -
------------------------------- --------
-
-
-第三步：数据清空
当你的页面切换的时候，vuex-turbolinks 会自动清空你的 Vuex 数据。但是，有时候你可能需要在特定的时刻手动清空你的数据。你可以通过调用 $store.dispatch('clearAllState') 来实现手动清空。
-- -------------------- ---- -------
------ ------- -
-------- -
-------- -
-- -- ---- ------ -----
-- ------
-- ----- -- --- ----- ----- ------
-------------------------------------
-
-
-示例代码
Vuex 数据定义
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
----- --
--
---------- -
---------------- -------- -
------------------------
-
--
-------- -
---------------- -
------ ------------------------- ----- -- ----- - ----------- --
-
--
-------- -
-------------------
-
--组件中的 Vuex 使用
-- -------------------- ---- -------
----------
-----
----
--- -------------- -- --------- ------------------
-- ------------- -- - -- ------------- --
------- ------------------------------- -- -------------
-----
-----
------- ------ -- --------- ------
------
-----------
--------
------ ------- -
--------- -
---------- -
------ -
- --- -- ------ -------- ----- ------ ---- --
- --- -- ------ -------- ----- ------ ---- --
- --- -- ------ -------- ------- ------ ---- -
-
--
------ -
------ ----------------------
--
----------- -
------ -----------------------------
-
--
-------- -
------------------ -
------------------------------- --------
-
-
-
---------结论
vuex-turbolinks 是一个非常清晰的工具，用于解决 Turbolinks 下 Vue.js 和 Vuex 状态数据的存储和管理。使用 vuex-turbolinks，你可以提升你的 Turbolinks 体验，让你的 Vue.js 应用更加高效。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056ce781e8991b448e69f2