angularjs中state的参数4_mpvue中使用Vuex
生活随笔
收集整理的這篇文章主要介紹了
angularjs中state的参数4_mpvue中使用Vuex
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
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的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: python读文件去除空行_「34」Py
- 下一篇: vuepress侧边栏配置_VuePre