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
    }
  }

这样我们就可以根据仓库对应数据改变影响组件关闭或者开启.