Vuex简单使用

vuex

vuex概念不必多说，就是vue官方提供的一个全局状态管理的工具，简而言之就是用来存储数据的东西，效果类似于localStorage和sessionStorage。

1 vuex的引入（vuex安装：npm install --save vuex）

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

在main.js中引入vuex

import store from './store/store.js'; //调用this.$store
new Vue({
  el: '#app',
  router,
  store: store,
  components: { App },
  template: '<App/>'
})

2 vuex 5大核心简单介绍

state:存储数据。

getters:定义获取state数据的方法。

mutations:操作state数据的方法（同步操作）。

actions: actions提交的是mutation,进行异步操作（通俗的说就是来实现mutation异步的方法）。

modules:模块化，每个模块拥有自己的state、gettters、mutations和actions，其用途是避免全局状态太多，变得太臃肿。

3 简单的vuex应用--官网示例

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state:{
    count:10
  },
  getters:{
    //调用方法：store.getters.getcount
    getcount(state){
      return state.count
    }
  },
  mutations:{
    //使用store.commit('increment')来触发该函数（同步
    increment(state){
      state.count+=1
    }
  },
  actions:{
    //分发actions的方法:store.dispatch('increment')
    increment(context){  //context:与 store 实例具有相同方法和属性的 context 对象
     // context.commit('increment')   //这行代码是调用mutations里的方法，和mutations不同的是action里可以写异步代码
     setInterval(()=>{
       context.commit('increment')
     },1000)
    }
  }
})

export default store

这只是vuex的简单应用，其他的如getters、mutations和actions还有第二参数，module模块化等更多知识可以去官网学习。