首先 我們打開終端 引入依賴
npm install wxministore --save
然后 如果你是新版開發(fā)者工具 就
npm i
構(gòu)建一下
如果你是 老版本的 微信開發(fā)者工具 就打開右上角詳情 選擇本地管理 勾選 使用 npm 模塊
然后 在根目錄下創(chuàng)建一個(gè) store.js 當(dāng)然建在哪是你自己決定的 反正 后面能引入到就好
然后 store.js 編寫代碼如下
import Store from 'wxministore';
export default new Store({
state: {
name: "小狗狗"
},
methods: {
publicfunction() {
console.log("公共函數(shù)");
}
}
});
這里 state 中的就是我們的公共數(shù)據(jù) 我這里只定義了一個(gè)name
然后定義了一個(gè)公共的函數(shù) publicfunction
然后 我們需要在 app.js中引入自己寫的store
這里 我們引入一下 然后在對象中 store賦個(gè)值 放在根目錄其實(shí)就是為了方便app.js引入
然后 我們再到具體的page界面中去使用
wxml 參考代碼如下
<view>
<view>{{ $state.name }}</view>
<button bindtap="decrement">轉(zhuǎn)變</button>
<button bindtap="getdata">打印數(shù)據(jù)</button>
<button bindtap="publicfunction">公共函數(shù)</button>
<button bindtap="toChangeInto">跳轉(zhuǎn)界面</button>
</view>
js參考代碼如下
const app = getApp();
Page({
data: {
},
onLoad() {
},
getdata() {
console.log(app.store.getState().name);
},
decrement() {
app.store.setState({
name: "大貓貓"
})
},
toChangeInto: function() {
wx.navigateTo({
url: '/pages/mint/mint'
})
}
})
首先 我們要通過getApp 得到一個(gè)app對象
然后 這里 我們想更改公共數(shù)據(jù) 就要 app.store.setState
讀取有兩種方式 app.store.getState() 和 $state
js中 我比較建議 app.store.getState() 頁面上可以 $state
運(yùn)行之后 會(huì)發(fā)現(xiàn) name 的值 順利展示了 小狗狗
然后 我們點(diǎn)擊打印 觸發(fā)getdata
我們可以確定 數(shù)據(jù)讀取是肯定沒問題的
然后我們點(diǎn)擊轉(zhuǎn)變 觸發(fā)decrement
可以看到 更改也是完全沒有問題
然后
我們點(diǎn)擊 跳轉(zhuǎn) 界面
要跳轉(zhuǎn)的page 就一行代碼 就是wxml上的文章來源：http://www.zghlxwxcb.cn/news/detail-752372.html
<text>{{ $state.name }}</text>
展示一下name
可以看到 這個(gè)數(shù)據(jù)是可以實(shí)現(xiàn)不同page 乃至組件共享的
文章來源地址http://www.zghlxwxcb.cn/news/detail-752372.html
到了這里，關(guān)于微信小程序通過 wxministore 實(shí)現(xiàn)類似于vuex的全局裝填數(shù)據(jù)管理的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
