VUEX 基础使用

• VUEX是什么？

        是实现组件全局状态(全局数据)管理的一种机制，可以方便的实现组件之间的数据共享

        主要是用来实现数据共享的，以后提到的状态的时候，就要知道是要共享的全局数据。

• VUEX的好处

1. 可以在VUEX中集中管理共享的数据，易于开发和后期维护。
2. 能够高效实现组件之间的数据共享，提高开发效率
3. 存储在vuex中的数据都是响应式的，可以保持数据与页面的同步

• 什么样的数据适合存储到vuex中？

        一般情况下，只有组件之间的共享数据才有必要存储到vuex中；对于组件中的私有数据，仍然存储在组件自身的data中即可。

安装

NPM

npm i vuex

核心概念

1. State

       State提供唯一的共享数据源，所有的共享数据都要统一放入store的state中进行存储

//创建store数据源，提供唯一公共数据

const store = new Vue.Store({

        state:{

        count:0

}

})

      State有两种使用方式:

        第一种：

this.$store.state.状态名称

       第二种:

//1.从vuex中按需导入mapState函数

import {mapState} from 'vuex'

//2.将全局数据映射为当前组件的计算属性

computed:{

...mapState:(['a','b',...])    //a,b ...均为使用到的变量名

}

        2.Mutations

Mutations用于变更Store中的数据

a.只能通过Mutations变更Store的数据，不可以直接操作Store中的数据

b.通过这种方式虽然操作繁琐，但是可以集中监控所有数据的变化

        第一种使用方式:

//定义 mutations

const store = new Vuex.Store({

        state:{

        count:0

},

mutations:{

        add(state){

        //变更状态

        state.count++

}

}

})

//触发mutation
methods:{
    addBtn(){
        //触发mutation的第一种方式
        this.$store.commit('add')
    }
}

第二种使用方式:

//1.从vuex中导入mapMutations函数

import { mapMutations } from 'vuex'

//2.通过刚才导入的mapMutations函数，将需要的mutation函数映射为当前组件的methods方法。

method:{

        ...mapMutations(['add','addN'])

}

 3.Actions

actions用于处理异步任务

如果通过异步操作变更数据，必须通过Action，不能直接使用mutations，但是在Actions中还是要通过触发mutation的方式间接变更数据

第一种使用方法:

//定义Actions
const store = new Vuex.Store({
    state:{},
    mutations:{},
    actions: {  //通过mutations间接修改状态 context理解为store对象
        addAsync(context){
          setTimeout(() => {
        context.commit('add')
          }, 1000);
        },
    subAsync(context){
      setTimeout(() => {
        context.commit('sub')
      }, 2000);
    }
  },
  
    }
})

第二种使用方法:

//从vuex中按需导入mapActions函数
import { mapActions } from 'vuex'

//将指定的actions函数映射为当前组件的methods函数
methods:{
    ...mapActions(['addAsync','addNAsync']),
    
     subAsyncBtn(){
            this.subAsync()
        }
}

 4.Getter

Getter用于对Store中的数据进行加工处理形成新的数据，类似于vue的计算属性，Store中的数据发生变化，Getter的数据也会跟着变化。

主要做什么：

       a是b的父组件  b是c的父组件 c要拿到a的值，就必须通过b组件。 vuex的话就是把状态放到一个地方，c想拿a的值，就直接从vuex里面拿。