Vuex 学习笔记

VUEX是什么？

用来解决组件之间共用数据问题的一个插件

• Vuex 内部结构

  • State 就是被共用的数据（可是不能够被直接操做，不能够直接访问）
  • Mutations 能够直接操做（Mutate） State 中的数据，能够定义 State 中的数据如何被改变
  • Actions 能够触发 Mutations 对States的改变，该触发操做专业名词为commit

• Components 与Vuex的交互

  • 经过 dispatch Actions 的方式来改变 State
  • 经过Render来读取State中的数据

---

Vuex的使用方法

1. 新建一个store.js文件（位置能够自选）

2. 在该文件中引入vue和vuex,并在vue中启用vuex

   Improve vue from 'vue'
   Improve vuex from 'vuex'
   vue.use(vuex)

3. 在该文件中配置 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配置的方法

  1. 将以上配置在Vuex对象中实例化并导出

     export default new vuex.Store({
         state,
         mutations,
         actions
     })

  2. 在main.js中引用该vuex的store实例

     improt store from './store'
     new vue ({
         ......
         store,
         ......
     })

  3. 在组件中使用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配置的方法

  1. 将以上配置在Vuex对象中实例化并导出

     export default new vuex.Store({
         module:{
            a: {
                 state,
                 mutations,
                 actions
             }
         }
     })

  2. 在main.js中引用该vuex的store实例

     improt store from './store'
     new vue ({
         ......
         store,
         ......
     })

  3. 在组件中使用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时候的知识总结，若是有不对的地方还请多多斧正