Vuex 学习笔记

VUEX是什么？用来解决组件之间共用数据问题的一个插件Vuex 内部结构State 就是被共用的数据（但是不可以被直接操作，不可以直接访问）Mutations 可以直接操作（Mutate） State 中的数据，可以定义 State 中的数据如何被改变Actions 可以触发 Mutations 对States的改变，该触发操作专业名词为commitComponents 与Vuex的交互通过 dispatch Actions 的方式来改变 State通过Render来读取State中的数据Vuex的使用方法新建一个store.js文件（位置可以自选）在该文件中引入vue和vuex,并在vue中启用vuexImprove vue from ‘vue’Improve vuex from ‘vuex’vue.use(vuex)在该文件中配置 state，mutations，actions//这里的state是数据实际储存的地方const state={ count:10}const mutations={ add(state,param){ state.count += param }, reduce(state,param){ state.count -= param }}const actions={ add:({commit},param)=>{ commit(‘add’,param) }, reduce:({commit},param)=>{ commit(“reduces”,param) }}只有一个store配置的方法将以上配置在Vuex对象中实例化并导出export default new vuex.Store({ state, mutations, actions})在main.js中引用该vuex的store实例improt store from ‘./store’new vue ({ …… store, ……})在组件中使用vuex的store实例在页面中引用该实例state的值 $store.state.count引入该实例的actions  import {mapActions} from ‘vuex’export default { methods:mapActions([‘add’,’reduce’])     }页面使用actions  @click=‘add(param)’ @click=‘reduce(param)‘有多个store配置的方法将以上配置在Vuex对象中实例化并导出export default new vuex.Store({ module:{ a: { state, mutations, actions } }})在main.js中引用该vuex的store实例improt store from ‘./store’new vue ({ …… store, ……})在组件中使用vuex的store实例在页面中引用该实例state的值 $store.state.a.count调用该实例的actions   import {mapActions} from ‘vuex’ export default { methods:mapActions(‘a’,[‘add’,’reduce’])      }页面使用actions  @click=‘add(param)’ @click=‘reduce(param)‘这篇笔记主要是本人学习Vuex时候的知识总结，如果有不对的地方还请多多斧正