Vuex的引入和使用

在使用mpvue開發(fā)小程序的過程中會(huì)遇到各種各樣的組件傳志問題,在mpvue和vue上使用Vuex是有區(qū)別的。

首先我們用vue/cli初始化項(xiàng)目時(shí)，是有提示是否使用vuex的。 如果不確定自己是否安裝了，可以去package.json中去查看是否有vuex。如果沒有可以npm i vuex -S下載后,我們需要在項(xiàng)目中引用它,一般建議單獨(dú)創(chuàng)建一個(gè)文件夾作為倉(cāng)庫(kù).

我這個(gè)地方就把倉(cāng)庫(kù)建在了store目錄下, 然后需要初始化一下倉(cāng)庫(kù): import Vuex from 'vuex' import Vue from 'vue'Vue.use(Vuex) export default new Vuex.Store({state: {show: false},mutations: {showPop(state) {state.show = !state.show}} }) 在vue中使用引入注冊(cè)就好了，但是在小程序中是不行的，我們還需要寫在Vued的原型上。

首先我們需要引入到mian.js文件中:

import Vue from 'vue' import App from './App' import store from '../static/store/store' Vue.prototype.$store = store Vue.config.productionTip = false App.mpType = 'app' const app = new Vue(App) app.$mount()

然后倉(cāng)庫(kù)在每個(gè)組件下都可以使用了。

使用方法和vue中一樣，vuex會(huì)讓組件傳值變的非常簡(jiǎn)答，我們只需要用到vuex文檔上寫到的幾個(gè)方法就可以完成我們的需求:

重點(diǎn)就在這個(gè)圖上，圍繞著數(shù)據(jù)觸發(fā)事件，調(diào)用方法，倉(cāng)庫(kù)函數(shù)執(zhí)行，再修改state的值 1. 組件有想傳值的需求，觸發(fā)一個(gè)事件，如果是異步就調(diào)用dispath， this.$store.dispath('showPop') 同步就可以省略這一步直接 this.$store.commit('showPop'),倉(cāng)庫(kù)接受函數(shù)類似，只不過一個(gè)叫actions另一個(gè)叫mutations，觸發(fā)事件函數(shù)第一個(gè)參數(shù)是倉(cāng)庫(kù)函數(shù)的名字（生成回調(diào)函數(shù)） 2. 在actions和mutations中修改state的值。

mutations: {showPop(state) {state.show = !state.show}} 回調(diào)函數(shù)的第一個(gè)參數(shù)都是state，這也是為了方便我們修改，

倉(cāng)庫(kù)數(shù)據(jù)變化，所有組件的數(shù)據(jù)也對(duì)應(yīng)會(huì)變化，但是有一點(diǎn)，如果是一些數(shù)據(jù)變了想要影響組件的彈窗開啟關(guān)閉，就需要使用在對(duì)應(yīng)組件中使用watch監(jiān)聽器了

監(jiān)聽器監(jiān)聽Vuex倉(cāng)庫(kù)

watch: {'$store.state.show'() {this.show = this.$store.state.show}}

這樣我們就可以根據(jù)倉(cāng)庫(kù)對(duì)應(yīng)數(shù)據(jù)改變影響組件關(guān)閉或者開啟.

總結(jié)

以上是生活随笔為你收集整理的angularjs中state的参数4_mpvue中使用Vuex的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。