欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

对Vuex的理解和简单使用

程序员文章站 2022-04-02 23:05:09
...

对Vuex的理解和使用

1、什么是vuex?
vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则状态以一种可预测的方式发生变化
2. vuex是用来解决什么问题的?
vuex用来解决多个组件状态共享。如果项目中多处用到同一个数据,可以考虑放在store里。总而言之,如果只是局部父子组件之间的数据问题,就用props等处理,全局状态的话考虑vuex,统一管理。
3.vuex的运作图解
对Vuex的理解和简单使用
4.vuex的具体用法
1)首先在vue.js开发环境中安装vuex
npm install vuex --save
2) 在main.js中创建store对象

    import vuex from "vuex";
    Vue.use(vuex);
    var store = new vuex.Store({// store对象
       state: {
         count: 0
       }
    })

完成到这一步,如果要访问count的话,this.$store.state.count

现在还有一个问题,store对象是放在main.js里面,为了方便日后的维护管理,最好把vuex的配置单独放出啦,在src下新建一个store文件夹,创建一个index.js

import Vue from "vue";
import vuex from "vuex";
Vue.use(vuex);
export default new vuex.Store({
    state:{
        count:4
    }
})

main.js中的代码:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import store from "./store/index"
Vue.config.productionTip = false
// 在vue实例化的时候加入store对象
/* eslint-disable no-new */
new Vue({
  el: '#app',
  store,
  components: { App },
  template: '<App/>'
})

组件访问state的方式

第一种:

this.$store.state.xxx

第二种:从vuex中按需导入mapState函数

import {mapState} from "vuex"

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

如何改变store中的数据?
Mutation 用于变更Store中的数据
1. 只能通过mutation变更Store数据,不可以直接操作Store中的数据
2. 通过这种方式虽然操作稍微繁琐一些,但是可以集中监控所欲数据的便化。

在store/index.js中

import Vue from "vue";
import vuex from "vuex";
Vue.use(vuex);
export default new vuex.Store({
    state:{
        count:4
    },
    mutations:{
        add(state){
            // 变更状态
            state.count++;
        }
    }
})

在组件中触发mutations的第一种方式

methods:{
    handleCount(){
      // 触发mutations的第一种方式
      this.$store.commit("add");
    }
  }

可以在触发mutations时传递参数:

mutations:{
        add(state,step){
            // 变更状态
            state.count+=step;
        }
    }

在组件中的用法:

handleCount(){
      // 触发mutations的第一种方式
      this.$store.commit("add",8);
    }

触发mutations的第二种方式:
在组件中:

import {mapState,mapMutations} from "vuex"

 methods:{
    handleCount(){
      // 触发mutations的第一种方式
      this.$store.commit("add",8);
    },
    ...mapMutations(["add"])
  }
 <button @click="add(3)">MapMutations Click </button>

什么是actions?
背景:在mutation中我们讲到,mutation中是存放处理数据的方法的集合,我们使用的时候需要commit.但是commit是同步函数,而且只能是同步执行。那我们想异步操作怎么办?
作用:在actions中提交mutation,并且可以包含任何的异步操作。actions可以理解为通过将mutations里面处理数据的方法变成可异步的处理数据的方法,简单的说就是异步操作数据(但是还是通过mutation来操作,因为只有它能操作)

1. 定义actions
  在store/index.js中
import Vue from "vue";
import vuex from "vuex";
Vue.use(vuex);
export default new vuex.Store({
    state:{
        count:4
    },
    mutations:{
        add(state,step){
            // 变更状态
            state.count+=step;
        },
        addN(state,step){
            state.count+=step;
        }
    },
    actions:{
        addNAsync(context,step){
            setTimeout(()=>{
                context.commit("addN",step)
            },1000)
        }
    }
})

触发actions

在组件中:
第一种触发actions的方式

 handle(){
      // 调用dispatch函数
      // 触发actions时携带参数
      this.$store.dispatch("addNAsync",5)
    },

第二种触发actions的方式:

import {mapState,mapMutations,mapActions} from "vuex"
  ...mapActions(["addNAsync"])(在methods中)
 <button @click="addNAsync(5)">mapActions click</button>
相关标签: vuex vue