Vuex的使用详解

文章目录

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vuex是什么？

方便实现组件之间数据的共享  里面的数据（也就是状态）是全局的

二、使用步骤

1.使用Vuex统一管理状态的好处

@1.能够在vuex中集中管理共享的数据，易于开发和后期维护

@2.高效的实现组件之间数据共享，提高开发效率 

@3.存储在vuex中的数据是响应式的，也就是其他地方引用vuex中的数据会随着vuex的改变而改变

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

一般情况，组件之间共享的数据存储到vuex中，对于组件的私有数据，直接存储到组件中data里

3.引入库

代码如下（示例）：

npm install vuex --save

4.导入vuex包

   创建store.js   在store.js中:

import Vue from 'vue
import Vuex from 'vuex'

Vue.use(Vuex)

 5.创建store对象(store.js中）

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations:{
        increment(state){
            state.count++
        }

    },
    actions:{
        
    }
})

 6.将store对象挂载到vue实例中（main.js中）

为了在 Vue 组件中访问 this.$store property,你需要为 Vue 实例提供创建好的 store。Vuex 提供了一个从根组件向所有子组件，以 store 选项的方式“注入”该 store 的机制：

new Vue({
  el: '#app',
  render:h => h(app),
  router,
  store: store,
})

 使用render渲染app根组件

8.组件访问state中数据的方式有两种：

~1.第一种方式：

this.$store.state.全局数据名称

~2.第二种方式

 在需要访问数据的组件中操作：从vuex中按需导入mapState函数

import {mapState} from 'vuex'

 通过mapState函数将当前组件需要的全局数据映射为当前组件的computed属性

例子如下：

import {mapState} from 'vuex'
export default {
    data() {
        return {}
    },
    computed:{
        // ...为展开运算符，意思为我将里面的比如count映射为当前组件的一个计算属性
        ...mapState(['count'])
    }

 9.Mutation  用于变更Store中的数据

@1.在vuex中只能通过mutation进行变更Store数据，不可以在组件中直接操作数据（见总结）

@2.可以集中监控数据的变化

使用：

export default new Vuex.Store({
    state:{
        count:1,
    },
    mutations:{
        increment(state){
            state.count++
        }
    },
})

 如何在组件中调用mutation中对应的函数

在组件中：

 <div>
    //点击触发事件同样需要，但是在方法中使用的是store中的事件
    <Button type="primary" @click="add">+</Button>
    这是vuex里面的数据:{{count}}
    <Button type="error">-</Button>
</div>

 ~1.触发mutations第一种方式：this.$store.commit()

methods:{
        add(){
            //点击+按钮触发mutation中的increment事件
            this.$store.commit('increment')
        }
    }

 触发mutations也可以传递参数

 mutations:{
        increment(state,step){
            state.count += step
        }
    },

methods:{
        add(){
            //触发mutations时携带参数，写法如下
            this.$store.commit('increment',2)
        }
    }

 ~2.触发mutations的第二种方式

和state按需引入一样，在所需组件中从vuex中按需引入mapMutation函数

import {mapMutations} from 'vuex

 methods:{
        // 第一种
        // add(){
        //     this.$store.commit('increment',2)
        // }
        // 第二种
        ...mapMutations(['increment','decrement']),
        add(){
            this.increment(2)
        },
        sub(){
            this.decrement(2)
        }
    }

10.Action专门处理异步任务

@1.如果要进行异步变更数据，必须通过Action，不能使用Mutation，但是在Action里面其实还是通过Mutation的方式进行间接变更数据的

~1.触发actions的第一种方式：this.$store.dispatch()

这是带有参数的，如果不带参数，直接将第二个参数去掉就行

 actions:{
        addAsync(context,step){
            setTimeout(()=>{
            //还是调用mutation里面的方法
                context.commit('increment',step)
            },2000)
        }
    }

在组件中：

 methods:{
        add(){
        //触发Action异步函数
            this.$store.dispatch('addAsync',2)
        }
    }

 ~2.触发actions的第二种方式

//从vuex中按需引入
import {mapActions} from 'vuex'

 methods:{
        ...mapActions(['addAsync']),
        add(){
            this.addAsync(2)
        },
    }

 综上，都对click进行绑定了一个事件，也可以直接触发store里面的函数更加方便，但是该按需引入的还得引入，只是methods方法里面少了一步而已

<Button type="primary" @click="addAsync">+</Button>

11.Getter

用于对Store中的数据进行加工处理形成新的数据，不会改变原数据

 @1.Getter对Store里的数据进行加工，类似于Vue的计算属性

@2.Store中数据发生变化，Getter的数据也会跟着变化

在store.js中写入：

 getters:{
        showNum(state){
            return '当前最新的数据是'+state.count
        }
    }

 使用getter的第一种方式：this.$store.getters.名称

{{$store.getters.showNum}}

第二种方式按需引入：

import {mapGetters} from 'vuex'

 computed:{
        ...mapGetters(['showNum'])
    }

//相应的变成  直接使用
{{showNum}}

总结

使用vuex不要犯以下错误：

1.以点击事件为例，在按钮上直接绑定点击事件，在methods方法中直接写点击事件的方法是错误的，因为vuex中不允许组件直接修改store里面的数据，vuex中的mutation用于变更store中的数据

2. 在mutations里面不能写异步函数，比如setTimeout函数，不支持，异步函数在Action里面写