JavaEE-微服务-Vuex

Vuex

2.1 什么是Vuex

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

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

2.2 使用 vue cli 构建项目

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
  }
 },

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"
  

步骤二：vuex配置文件（src/store.js） （自动生成）

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

Vue.use(Vuex)

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

 mutations: {         //函数声明区域（修改数据）
 },

 actions: {          //事件区域（执行函数）
 }
})

• 步骤三：main.js中配置vuex （自动生成）