vuex使用理解

先不说原理,直接说使用吧,用着用着就 明白了

A: 需求:

在项目中,组件之间是独立的,组件之间要想实现通讯,父子之间通讯能够用props选项,可是兄弟之间的通讯就比较复杂

B: 简单理解:

若是在state中定义一个数据以后,咱们能够在项目中的任何一个组件里获取和修改,而且咱们的修改能够获得全局的相应变动 好比

let state = {
  userList: [], // 用户列表
}
这个userList里的数据,能够在全局使用
复制代码

C: vuex种的五个基本属性

1, 咱们能够经过this.$store在vue的组件中获取vuex的实例

2, State:vuex中的数据源,能够经过thsi.$store.state获取在vuex中声明的全局变量的值

3, Getter:至关于vue中的computed(计算属性),能够用于监听/计算state中值的变化

4, Mutation: vuex中提交更改数据的方法(只能同步执行)

5, Action:

6, Module: 模块化vuex

• 1,先开始使用,在项目中新建一个store文件夹,至关于一个仓库,在store文件夹下面新建index.js文件

import Vue from 'vue'
import Vuex from 'vuex' // 引入vuex
Vue.use(Vuex)
const store = new Vuex.Store(); // 实例化
export default store
复制代码

• 2, 在main.js里面引入store,而后全局注册一下,这样就能够在任何组件使用this.$store了

import store from './store' //引入store
new Vue({
  el: '#app',
  router,
  store, //使用store
  template: '<App/>',
  components: { App }
})
复制代码

• 3, 回到store文件夹的index.js文件,咱们声明一个state变量,赋值给一个对象,里面定义两个初始的属性,而后在实例化的Vuex.Store里面传入一个空对象,把声明的state放进去

说明: vuex使用单一状态树,state是惟一数据源,因此每一个莹莹仅包含一个store实例,

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
 const state = { //要设置的全局访问的state对象
    showHello: true,
    changeNum: 0
    //要设置的初始属性值
}
 const store = new Vuex.Store({
   state
})
export default store
复制代码

说明: 作完这个以后,咱们就能够在任何组件里面使用this.%store.showHello和this.%store.changeNum来获取定义的值了

• 4,vuex官方提供了一个getter(能够认为是store的计算属性),想计算属性同样,getter的返回值会根据它的一来被缓存起来,只有当它的依赖值发生改变才会被从新计算,把他也扔到state里面

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={   //要设置的全局访问的state对象
    showHello: true,
    changeNum: 0
 //要设置的初始属性值
}
const getters = {   //实时监听state值的变化(最新状态)
    isShow(state) {  //方法名随意,主要是来承载变化的showHellor的值
       return state.showHello
    },
    getChangedNum() {  //方法名随意,主要是用来承载变化的changeNum的值
       return state.changeNum
    }
}
const store = new Vuex.Store({
   state,
   getters
});
export default store;
复制代码

• 5, 如今只有定义的state初始值,可是咱们须要改变初始值,接下来就是mutation了mutation也是一个对象,这个对象里面放能够改变state初始值的方法,具体的就是:给里面的方法传入参数或者额外的其余参数,理由vue的双向数据驱动进行值得改变,把定义好的mutation也扔进Vuex.Store里面.

更改vuex的store中的状态的惟一方法就是提交mutation,vuex中的mutation很是相似事件,就是每一个mutation都有一个字符串的事件类型(type)和一个回调函数(handler),这个回调函数就是咱们实际进行状态更改的地方,而且它会接受state做为第一个参数

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state={  //要设置的全局访问的state对象
    showHellor: true,
    changeNum:0
    //要设置的初始属性值
 };
const getters = { //实时监听state值的变化(最新状态)
    isShow(state) { //承载变化的showHellor的值
       return state.showHellor
    },
    getChangedNum(){ //承载变化的changebleNum的值
       return state.changeNum
    }
};
const mutations = {
    show(state) { //自定义改变state初始值的方法,这里面的参数除了state以外还能够再传额外的参数(变量或对象);
        state.showHellor = true;
    },
    hide(state) { //同上
        state.showHellor = false;
    },
    newNum(state, sum){ //同上,这里面的参数除了state以外还传了须要增长的值sum
       state.changeNum += sum;
    }
};
复制代码

• 6, 这个时候就能够用 this.$store.commit('show') 或

  this.$store.commit('hide') 以及

  this.$store.commit('newNum',6)在别的组件里面进行改变showHello和changeNum的值了

• 7, 可是在vuex中,mutation里的方法都是同步,意思就是,好比这个this.$store.commit('newNum',sum)方法,

两个组件里用执行获得的值,每次都是同样的,显然不是咱们须要的,vuex还提供了actions,把action也放入Vuex.Store里面,这个actions也是对象变量,里面的Action方法,能够包含任意异步操做,这里的异步就是用异步发出mutation里面的方法,action里面的自定义函数接受一个context参数和要变化的形参

// 实践中咱们能够用es6参数解构来剪发代码
actions: {
  increment ({ commit }) {
    commit('increment')
  }
}
复制代码

context和store实例具备相同的属性和方法,能够调用context.commit()提交一个mutation,或者经过context.state和context.getter来偶去state和getter

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state={ //要设置的全局访问的state对象
    showHello: true,
    changeNum:0
    //要设置的初始属性值
   };
const getters = { //实时监听state值的变化(最新状态)
    isShow(state) { //承载变化的showHello的值
       return state.showHello
    },
    getChangedNum(){ //承载变化的changebleNum的值
       return state.changeNum
    }
};
const mutations = {
    show(state) { //自定义改变state初始值的方法，这里面的参数除了state以外还能够再传额外的参数(变量或对象);
        state.showHello = true;
    },
    hide(state) { //同上
        state.showHello = false;
    },
    newNum(state,sum){ //同上，这里面的参数除了state以外还传了须要增长的值sum
       state.changeNum += sum;
    }
};
 const actions = {
    hideHello(context) { //自定义触发mutations里函数的方法，context与store 实例具备相同方法和属性
        context.commit('hide');
    },
    showHello(context) { //同上注释
        context.commit('show');
    },
    getNewNum(context, num){ //同上注释，num为要变化的形参
        context.commit('newNum', num)
    }
};
  const store = new Vuex.Store({
   state,
   getters,
   mutations,
   actions
});
export default store;
复制代码

action 经过 store.dispatch 方法触发

在外部组件进行全局执行actions里面的方法的时候,你只须要执行

this.$store.dispatch('hideHello')

或this.$store.dispatch('showHello')

以及this.$store.dispatch('getNewNum', 6) //6要变化的实参