简介
在前端开发中，我们常常需要面对复杂的状态管理，例如全局状态、组件状态等。这些状态的变化会触发页面的重绘或者甚至是发送网络请求等操作。而 @wildpeaks/store 就是一款轻量级的状态管理工具，它可以帮助我们轻松地管理各种状态。
安装
安装 @wildpeaks/store 可以使用 npm :
npm install @wildpeaks/store
在项目中引用 @wildpeaks/store :
import { createStore } from '@wildpeaks/store'创建 store
使用 createStore 方法可以创建一个新的 store :
-- -------------------- ---- -------
----- ----- - -------------
------ -
------ --
-------- ------ ------
--
---------- -
---------------- -
-------------
--
-------------------- -------- -
------------- - ---------------
-
--
-------- -
----- ------------------- -
----- -------- - ----- -----------------------------------------
----- ------- - ----- ---------------
------------------------------- - ------- --
-
--
-------- -
-------------------- -
------ --------------------
-
-
--store 可以包含以下四个属性：
state：存储所有的状态。mutations：处理状态的更新，可以看作是 setters 。actions：封装异步操作。getters：计算衍生状态。
使用 state
通过 store.state 可以访问所有的状态：
console.log(store.state.count) // 0 console.log(store.state.message) // 'hello world'
使用 mutations
通过 store.commit 方法可以调用 mutations 来更新状态：
store.commit('increment')
console.log(store.state.count) // 1mutations 接收的第一个参数是 state ，第二个参数是 mutation 的载荷，通常是一个对象，它可以包含多个属性。以 updateMessage 为例：
store.commit('updateMessage', { message: 'hello store' })
console.log(store.state.message) // 'hello store'使用 actions
actions 可以封装异步操作。通过 store.dispatch 方法可以调用 actions 。
store.dispatch('getMessage')actions 接收的第一个参数是 context ，它包含以下几个属性：
state：当前的状态。commit：调用 mutations 来更新状态。dispatch：调用其他 actions 。getters：计算出的状态。
使用 getters
getters 可以计算出衍生状态。通过 store.getters 方法可以访问所有的 getters 。
console.log(store.getters.messageLength) // 11
示例代码
纯前端例子：
-- -------------------- ---- -------
--------- -----
------
------
------- -------------------------------------
------- --------------------------------------------------
-------
------
---- ---------
--------- -- ------------------ ------
---------- ------- -- ---------------------------- ------
------- ------------------------------------------------------
------
--------
----- ----- - -------------
------ -
------ --
-------- ------ ------
--
---------- -
---------------- -
-------------
-
--
-------- -
-------------------- -
------ --------------------
-
-
--
--- -----
--- -------
-----
--
---------
-------
-------后端例子：
-- -------------------- ---- -------
----- --- - --------------
----- - ----------- - - ---------------------------
----- --- - --- -----
----- ----- - -------------
------ -
------ --
-------- ------ ------
--
---------- -
---------------- -
-------------
-
--
-------- -
-------------------- -
------ --------------------
-
-
--
------------- --- -- -
-------- - -
--------- ------------------------
---------- ------- ----------------------------------
------- ----------------------------------------
--------
-------- ----------- -
--- ----- - --- -----------------
------------------------ - ---------- -
-- ---------------- -- - -- ----------- -- ---- -
----------------------- - -----------------
-
--
------------------ ------------- ------
-------------------------------------- --------------------
-------------------------------
-
---------
-
--
------------- --- -- -
-- -------- --- ------------- -
-------------------------
-------- - -
--------- ------------------------
---------- ------- ----------------------------------
------- ----------------------------------------
--------
-------- ----------- -
--- ----- - --- -----------------
------------------------ - ---------- -
-- ---------------- -- - -- ----------- -- ---- -
----------------------- - -----------------
-
--
------------------ ------------- ------
-------------------------------------- --------------------
-------------------------------
-
---------
-
-
--
----------------总结
通过本文，我们了解了如何使用 @wildpeaks/store 来管理前端的状态。可以看出 @wildpeaks/store 更加简洁、灵活，适合用于小型项目的状态管理。在状态管理方面，虽它不像 Redux 或 Vuex 那样成体系，但在其核心概念的理解上更加容易。如果你正在管理一个小型项目，不妨尝试使用 @wildpeaks/store 来管理状态，相信你会有所收获。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067355890c4f7277583ba3