Vuex的引入和使用

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

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

我這個地方就把倉庫建在了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文檔上寫到的幾個方法就可以完成我們的需求:

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

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

倉庫數據變化，所有組件的數據也對應會變化，但是有一點，如果是一些數據變了想要影響組件的彈窗開啟關閉，就需要使用在對應組件中使用watch監聽器了

監聽器監聽Vuex倉庫

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

這樣我們就可以根據倉庫對應數據改變影響組件關閉或者開啟.

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。