xuex 详解以及使用

大家好，我是讯享网，很高兴认识大家。

1. vuex是什么?

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

小范围的数据共享:用父向子,子向父,兄弟间传值即可。如果需要频繁大范围的数据共享就用vuex

1.1使用vuex统一管理状态的好处

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

1.2 什么样的数据适合存储到vuex中
一般情况下，只有组件之间共享的数据，才有必要存储到vuex中;对于组件中的私有数据，依旧存储在组件自身的data中即可。

2. vuex的基本使用

1.安装vuex依赖包

npm install vuex --save

2.导入vuex包

3.创建store对象

const store = new vuex.Store ( { 
    //state中存放的就是全局共享的数据 state: { 
    count: 0 } })

讯享网

4.将store对象挂载到vue实例中

讯享网new vue ( { 
    el: '#app', render: h => h (app), router, //将创建的共享数据对象，挂载到vue实例中 //所有的组件，就可以直接从store中获取全局的数据了 store })

3. vuex核心概念

3.1核心概念概述
vuex中的主要核心概念:

State
Mutation
Action
Getter

3.2 State
State提供唯一的公共数据源，所有共享的数据都要统一放到Store的 State中进行存储。

//创建store数据源，提供唯一公共数据 const store = new vuex.store ({ 
    state: { 
    count: 0 } ))

组件访问State中数据的第一种方式:

讯享网

讯享网 this.$store.state.全局数据名称

组件访问State中数据的第二种方式:

// 1．从 vuex中按需导入mapstate 函数 import { 
    mapstate } from 'vuex"

通讨刚才导入的mapState函数，将当前组件需要的全局数据，映射为当前组件的computed计算属性:

讯享网// 2．将全局数据，映射为当前组件的计算属性 computed:{ 
    ...mapstate(['count ']) }

3.3 Mutation
Mutation用于变更Store中的数据。

只能通过mutation变更Store数据。不可以直接操作Store 中的数据。
通过这种方式虽然操作起来稍微繁琐一些，但是可以集中监控所有数据的变化。

Mutation写法:(举一个简单的例子:state数据自增)

 const store = new Vuex.store ({ 
    state:{ 
    count:0 }, Mutations:{ 
    add(state){ 
    //变更状态 state.count++ } //触发Mutation传参 adds(state,num){ 
    state.count+=num } } })

讯享网//触发Mutation //第二触发Mutation方式的引入 import [ mapMutations ] from 'vuex' metheds:{ 
    //第一种触发Mutation方式 test(){ 
    this.$store.commit('add') } test2(){ 
    //commit的作用就是调用某个 Mutation函数 this.$store.commit('adds',2) } //1.从vuex中按需导入 mapMutations 函数import [ mapMutations ] from 'vuex' //this.$store.commit('')是触发mutations的第一种方式，触发mutations的第二种方式: //第二种触发Mutation函数 ...mapMutation(['add','adds']) test3(){ 
    //直接this指向就可以了 this.add } }

注意:Mutation不能直接使用异步操作,入过需要异步操作用action

3.4 Action
Action用于处理异步任务。

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

错误写法:

 Mutations:{ 
    //这样写是不对的,只是效果上有变化,但是vuex控制器没有变化 add(state){ 
    setTimeout(()=>{ 
    state.count++ },1000) } }

正确写法:

讯享网 const store = new Veux.store({ 
    State:{ 
    count:0 }, Mutations:{ 
    add(state,params){ 
    state.count+=params } }, Action:{ 
    addAsync(context,params){ 
    setTimeout(()=>{ 
    //触发Action携带参数 context.commit('add',params) },1000) } } })

//触发Action metheds:{ 
    test(){ 
    this.$store.dispatch('addAsync',3) } }

注意:

在Action中不能直接访问state里面的数据;
必须通过 context.commit(’’)触发某个 mutation 才行;
只有在Mutation中有权限修改state里面的数据;

3.5 Getter
Getter用于对Store 中的数据进行加工处理形成新的数据。

Getter可以对Store中已有的数据加工处理之后形成新的数据，
类似Vue的计算属性。Store 中数据发生变化，Getter的数据也会跟着变化。

讯享网 const store new Vuex.store ({ 
    state:{ 
    count:0 }, Getter:{ 
    showNum: state=> { 
    return '返回最新的值('+state.count+')' } } })

//使用方式第一种方式,直接在插值中添加 this.$store.getters.名称 //第二种方式 import { 
   mapGetter} from 'vuex' computed:{ 
    ...mapstate(['mapGetter']), ...mapGetter(['showNum']) }

vuex的讲解就到这里结束,不懂得可以留言或私信问我

1. vuex是什么?

2. vuex的基本使用

3. vuex核心概念

相关推荐