Vuex的引入和使用

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

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

我這個地方就把倉庫建在了store目錄下, 然后需要初始化一下倉庫: 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中使用引入注冊就好了，但是在小程序中是不行的，我們還需要寫在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()

然后倉庫在每個組件下都可以使用了。

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

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

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

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

監(jiān)聽器監(jiān)聽Vuex倉庫

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

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

總結(jié)

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

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