vuex的详细介绍和用法（菜鸟福利）

前言：

        vue的详细介绍和用法

步骤一：先定义vuex核心的文件夹  store  并在里面加入  index.js

  1、不使用  modules 的情况下，所有的文件都在   index.js中定义

• state          定义字段，类似我们的页面的data

• actions      这个阶段用来请求后台数据，然后把后台数据给发送到 mutations  函数方法里面

• mutations  可以做逻辑操作，跟 methods  一样

• getters       将state里面定义的字段发送出去

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


Vue.use(Vuex)

const store = new Vuex.Store({
  //1 定义字段，类似我们的页面的data
 state:{
    nav_active:0, //选中
  },


 //2 一般情况不用这个，这个阶段用来请求后台数据，然后把后台数据给发送到 mutations  函数方法里面
  actions:{
    //params传入的参数
    demo({ commit,params }) {
      //commit是调用mutations的方法，第一个参数是方法明，第二个以上是参数
      commit('changeActive',111)
    },
  }

 
 //3 这个阶段是可以做逻辑操作，跟 methods  一样
 //这里的调用有两种，
//（1）actions里面调用，commit('mutations里面定义的方法名',具体的参数)
//（2）页面上通过  this.$store.commit('mutations里面定义的方法名',具体的参数)
  mutations:{
    //修改选中效果
    changeActive(data){
      state.nav_active = data
      debugger
    }
  },


 //4  最后一个阶段，将state里面定义的字段发送出去，在页面上通过  watch实时接受
  getters:{
   nav_active: state => state.nav_active,
  }
})

export default store

2、使用 modules 的情况下，

（1）index.js

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

//根据页面引入不同模块
import exam from './modules/exam'

Vue.use(Vuex)

const store = new Vuex.Store({
  //注册不同的模块
  modules: {
    exam,
  },
  getters
})

export default store

（2）exam.js

export default {
  state:{
    nav_active:0, //选中
  },
  mutations:{
    //修改选中效果
    changeActive(state,{data}){
      state.nav_active = data
    }
  },
  actions:{
    //params传入的参数
    demo({ commit,params }) {
      //commit是调用mutations的方法，第一个参数是方法明，第二个以上是参数
      commit('changeActive',111)
    },
  }
}

步骤二：在main.js中引入store，然后可以在页面用  this.store来调用store

import store from './store'  //引入地址

new Vue({
  el: '#app',
  router,


  store, //在new Vue注册

  render: h => h(App)
})

步骤三：在具体页面上使用（带modules的），比如  a.vue  页面，

                   直接调用不用引入 :   import { mapGetters ，mapActions  } from 'vuex'

  methods: {

    //即将结束和开始
    changeActive(index,name){
      this.active = index


      //动态调用mutations
      this.$store.commit('changeActive',index)
    },


}

 （上面的是发送state，下面的是想直接获取上面的state里面的值的话可以这样做，）

methods() {
    this.active = this.$store.exam.nav_active
  },

步骤四：我想在  b.vue  页面实时拿到我们定义在vuex中的  nav_active  这个字段

(1) 页面上先引入vuex 的 getters

import { mapGetters  } from 'vuex'

(2) 在计算属性中，监听getters里面定义的字段

computed: {
    ...mapGetters([
      //里面写你的getters里面想监听的具体字段
      'nav_active'
    ])
  },

（3）在watch中写入监听的具体方法

watch: {
    ...mapGetters([
      'nav_active'
    ]),
    nav_active(val){
      //val就是当前的数据
      //当 getters里面的  nav_active  字段发生改变就进入该方法
      
      
    }
  },

到此结束！