vue全家桶与 vuex 知识

vue

vuex 是什么

解决组件间通讯成本高的问题
原文：Centralized State Management for Vue.js.
翻译：为vue提供集中状态管理

vuex 由什么组成

组成：action + mutations + state

vuex 特点

1、单向数据流
2、想调用mutations，用commit;
想改变state，用mutate
想通过组件交互，改变state，用dispatch

记住：
action: 用于处理异步相关数据操作
mutations: 用于处理同步操作

vuex如何安装

安装

   "dependencies": {
    "vue": "^2.5.2",
    "vue-resource": "^1.3.4",
    "vuex":"^3.0.0",
    "vue-router": "^3.0.1"
  }

vuex如何使用

第一步：引入

  import Vuex from 'vuex'

第二步：启用

 Vue.use(Vuex);

第三步之前

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//暴露对象接口
export default new Vuex.Store({
    state: {
        title:'1506'
    },
    mutations:{
        autoIncrement(state,param){
            console.log(6666666666,this, arguments);
            +state.title++
        }
    }
})

第三步：使用

 this.$store

详解state, mutations, action

state
1、双向代理状态数据
2、谁能改变state: mutations

state: {
    title:'1506'
}

mutations
怎么调用mutations中的方法
1、this.$store.commit(函数名，自定义参数);
函数：
参数：2个
第一个参数state,
第二是自定义传参
作用域： Store

mutations:{
    autoIncrement(state,param){
        console.log(6666666666,this, param);
        +state.title++
    }
}

actions
如何调用？
this.$store.dispatch(函数名，自定义参数);
函数名：
作用域：Store
参数：2个
第一个参数是actions对象，第二个自定参数

actions: {
    //triggerMe如何触发
    triggerMe(actions,v){
    }
}