Vuex

vuex是一个专门为vue.js应用程序开发的状态管理模式。通俗点说就是我们项目中需要共享的一些数据的管理容器,这里的状态就是数据。
Vuex常用对象
state:存储状态,也就是变量
getters:对数据获取之前的再次编译,可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
mutations:提交状态修改。也就是set、get中的set,唯一修改state的方式 ,不支持异步操作 。
actions:Action 类似于 mutation,不同在于:
Action 提交的是 mutation,而不是直接变更状态。
Action 可以包含任意异步操作。
modules:store的子模块,内容就相当于是store的一个实例 。

基本

import Vue from 'vue'       // 引入vue
import Vuex from 'vuex'     // 引入vuex

// 导出模块
export default new Vuex.Store({
  state: {
    name:'aiva',
    age:22
  },
  /* 
      getter 相当于计算属性
      getter中的方法默认有两个参数
        1.state 当前VueX对象中的状态对象
        2.getters 当前getters对象,用于将getters下的其他getter拿来用
  */
  getter:{
      lastAge(state) {
          return this.$store.state.age - 1;
      },
      last(state,getters) {
          return state.name + getters.lastAge;
      }
  },
  /* 
      mutations 是更改state的唯一方式
      mutations中的方法必须是同步函数
      mutations中的方法默认有两个参数
        1.state 当前VueX对象中的状态对象
        2.Payload 该方法在被调用时传递的参数
  */
  mutations: {
    changeName(state,name) {
        state.name = name;
    }
  },
  /* 
      Action 类似于 mutation,不同在于:
        1.Action 提交的是 mutation,而不是直接变更状态。
        2.Action 可以包含任意异步操作。

      Actions中的方法有两个默认参数
        1.context 上下文(相当于箭头函数中的this)对象
        2.payload 挂载参数(该方法在被调用时传递的参数)
  */
  actions: {
    editName(context,payload){
        context.commit('changeName',payload)
    }
  },
  // store的子模块,内容就相当于是store的一个实例 
  modules: {
    childrenA:{
        state:{},
        getters:{},
        ....
    }
  }
})

项目中使用

import {mapMutations} from 'vuex'// 导入映射方法
methods:{
 ...mapMutations(["addToCart"]),
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值