JavaEE-微服务-Vuex

Vuex

2.1 什么是Vuex

  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式

  • Vuex在组件之间共享数据。

JavaEE-微服务-Vuex_第1张图片
2.2 使用 vue cli 构建项目
JavaEE-微服务-Vuex_第2张图片

2.3 入门案例

2.3.1 定义数据

export default new Vuex.Store({
 state: { // 状态区域(定义变量区域)
  user: '',
  token: ''
 },

 mutations: { //修改变量
  setUser(state, value) {
   state.user = value
  },
  setToken(state, value){
   state.token = value
  }
 },

JavaEE-微服务-Vuex_第3张图片

2.3.2 调用数据

  • 获得数据:调用state区域,和计算属性结合,使数据可以实时更新





  • 设置数据:调用mutations区域





2.4 总结

属性 描述 实例
state 用于定义对象的状态 (需要共享的数据)
获得方式:
this.$store.state.username
state: {
username: ‘jack’,
password: ‘6666’
}
getters vuex的计算属性,获得依赖的缓存数据,只有依赖的值发生改变,才重新计算
获得方式:
this.$store.getters.getUsername
getters: {
getUsername(state) {
return state.username
}
}
mutations 唯一可以修改对象状态的方式
修改方式
this.$store.commit(‘setUsername’,‘肉丝’)
mutations: {
setUsername(state,value){
state.username = value
}
}
actions 可以执行mutations,action运行有异步操作
执行方式:
this.$store.dispatch(‘uesrnameAction’,‘肉丝666’)
actions: { //事件区域
uesrnameAction(context,value){
context.commit(‘setUsername’,value) }
}
module vuex的模块,允许有独立的以上4个属性

2.5 高级:全局引用(映射)

  • 在vuex中提供一组map用于简化vuex的操作

2.5.1 入门

  • 步骤一:导入对应map
//1 导入需要map
import {mapState} from 'vuex'
  • 步骤二:获得数据





  • 步骤三:设置数据





2.5.2 完整参考

  • 编写store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {        //存储数据
  name : 'jack'
 },
 mutations: {      //修改数据
  changeName(state , value){
   state.name = value
  }
 },
 actions: {       //触发mutation
  changeNameFn(content, value){
   content.commit("changeName", value);
  }
 },

 getters: {        //获得数据
  getName: state => state.name,
  getNameLen : (state, getters) => getters.getName.length
 }
})
  • About.vue



2.6 流程总结

  • 步骤一:package.json 确定vuex版本 (自动生成)

    "vuex": "^3.0.1"
    

JavaEE-微服务-Vuex_第4张图片
步骤二:vuex配置文件(src/store.js) (自动生成)

JavaEE-微服务-Vuex_第5张图片

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
 state: {           //数据存储区域
 },

 mutations: {         //函数声明区域(修改数据)
 },

 actions: {          //事件区域(执行函数)
 }
})
  • 步骤三:main.js中配置vuex (自动生成)
    JavaEE-微服务-Vuex_第6张图片

你可能感兴趣的:(java-ee,android,flutter,vue)