使用vuex的几大步骤新手

第一步，首先建立一个store文件里面创建这几个js文件

第二步，我们需要把App这个文件里面的mask_layer发送到另外一个文件上注意：引入mapGetters,

还有，我先call在这，下次直接call就行

 import {mapGetters} from 'vuex'

    computed: {
      ...mapGetters(['showZZC']),
    },
    watch:{
      ...mapGetters(['showZZC']),
      showZZC(val){
        this.mask_layer = val
      },

第三步：在ues.js中这样写

const user = {
  state: {
    showZZC:false
  },

  mutations: {
    //修改state里面的enterpriseSelectEvent
    changeZZC: (state, val) => {
      state.showZZC= val
    },
  },

  actions: {
  }
}
export default user

第四步：在getter.js里面

const getters = {
  showZZC:state => state.user.showZZC,//这里的user是你的modules里面具体文件名字比如user.js
}
export default getters

第五步：在index里面

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  },
  getters
})

export default store

第六步：在创建的这几个js文件写完后，就需要在接收的文件里写了

先引用在main.js中，如果在当前页面引入，调用的时候就没有那个this ：1，

// import store  from '@/store'

在mian.js中  还得加一个  Vue.prototype.$store = store 

然后全局都可以用，this.$store

再使用：2，

// this.$store.commit('showZZC', true)

这样这个完整的步骤就完了！！！！！

使用vuex的几大步骤 新手

猜你喜欢

使用vuex的几大步骤新手