如何使用vuex

hwJw19 发表于 2021/06/30 17:44:27 2021/06/30
【摘要】 官方文档是这样介绍Vuex的,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。在我理解,简单的白话来说,就是管理(读/写)各个页面或者各个组件都需要使用的数据。github站点: https://github.com/vuejs/vuex在线文档: https://vuex.vuejs.org/zh-cn/安装Vuex:npm install vuex --save下面我们先...

官方文档是这样介绍Vuex的,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。在我理解,简单的白话来说,就是管理(读/写)各个页面或者各个组件都需要使用的数据。

github站点: https://github.com/vuejs/vuex

在线文档: https://vuex.vuejs.org/zh-cn/

安装Vuex:npm install vuex --save

下面我们先来了解Vuex的核心概念:

1.state

vuex管理的状态对象,它应该是唯一的,类似于vue中的data,用于初始化数据

2.mutation

包含多个直接更新state的方法(回调函数)的对象,通过action中的commit('mutation名称'),只能包含同步的代码, 不能写异步代码

3.action

包含多个事件回调函数的对象,可以处理异步,通过组件中$store.dispatch('action名称')触发,不能直接修改state,首先在组件中通过dispatch触发action,然后在action函数内部commit触发mutation,通过mutation修改state状态值

4.getters

包含多个计算属性(get)的对象,相当于vue中的computed,依赖于state状态值,状态值一旦改变,getter会重新计算,也就是说,当一个数据依赖于另一个数据发生变化时,就要使用getter

5.modules

包含多个module,一个module是一个store的配置对象,与一个组件(包含有共享数据)对应

具体使用方法:

一、store/index.js 初始化

// 导入vue及vuex
import Vue from 'vue'
import Vuex from 'vuex'
// 挂载vuex
Vue.use(Vuex)

// 创建vuex对象并向外暴露
export default new Vuex.Store({
  // 全局属性变量
  state: {
  },
  // 全局同步方法, 调用方法,this.$store.commit("xxx")
  mutations: {
  },
  // 异步方法 调用方法,this.$store.dispatch("xxx")
  actions: {
  },
  // Vuex属性计算,在视图里面当变量使用
  getters: {
  },
  // 模块化注册
  modules: {
  }
})

二、src/main.js 注入store

法一:

// 导入
import store from './store/index.js'
// 挂载到Vue实力上,全局可通过this.$store进行调用
Vue.prototype.$store = store

法二

import store from './store.js'
new Vue({
	store
})

三、设置state初始值(store/index.js)

state: {
    data:0
  },

四、组件内获取state

this.$store.state.data

五、直接通过mutations修改state

1.store/index.js

给mutations添加方法

mutations: {
    changeDataByMutations(state, params) {
      state.data = params
    }
  }

2.组件内触发mutations方法

<button @click='changeDataByMut'>通过mutation改数据</button>
methods:{
      changeDataByMut:function(){
        // 通过commit 触发 mutation 并传参
        this.$store.commit('changeDataByMutations', 10) //此时组件1和组件2中data都是10啦
      }
    }

六、通过action修改state

1.store/index.js

给action添加方法

actions: {
    changeDataByAction(context, params) { //context是一个对象,从它里面把咱们需要的commit方法解构出来
      let {commit} = context
      commit('changeDataByMutations', params)
    }
  }

2.组件内触发action方法

<button @click='changeDataByAct'>通过action改数据</button>
methods: {
      changeDataByAct: function() {
        // 通过dispatch 触发 action 并传参
        this.$store.dispatch('changeDataByAction', 100) //此时data就变成100啦,并且组件1和组件2是同步的
      }
    }

七、getter的使用

1.store/index.js

getters: {
    doubleGet(state) {
      return state.data * 2
    }
  }

2.组件内获取getter计算的值

this.$store.getters.doubleGet

下附图片两张,以供参考。

vuex思维导图

vuex流程图

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区),文章链接,文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件至:cloudbbs@huaweicloud.com进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容。
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。