Vuex的简介以及入门案例

Vuex介绍

Vuex是一种状态管理模式,它专为Vue.js应用程序开发设计。使用Vuex能够更好地组织Vue.js应用中的代码,并使代码更容易理解和维护。

Vuex把应用的状态(数据)集中存储到一个全局的store对象中,并使用mutations(同步任务)和actions(异步任务)来修改状态。Vuex的数据流是单向的,当组件需要更新状态时,它将发起一个action,action又会commit一个mutation,mutation会修改state,state的变化会自动更新到所有涉及该状态的组件视图中。

Vuex的核心概念包括state、getter、mutation、action、module等。

- State:即应用的状态,存储到一个全局的store对象中。
- Getter:类似于computed,用来对state进行计算,返回派生状态。
- Mutation:修改state的唯一途径,在mutation函数内部修改state,且必须是同步的。
- Action:异步操作的行为,可以包含多个mutation,通过dispatch来触发action。
- Module:将大型的store拆分为多个小模块,每个小模块都有自己的state、getter、mutation、action。

总之,Vuex是Vue.js应用中一种非常实用的状态管理工具,让我们可以更好地管理和维护应用的状态数据。

图像解析

Vuex的简介以及入门案例_第1张图片

官方图像解析

Vuex的简介以及入门案例_第2张图片

传值的图像解析  

Vuex的简介以及入门案例_第3张图片

Vuex的入门案例

下载我们的Vuex的插件   npm install vuex -S​​​​​​​Vuex的简介以及入门案例_第4张图片

Vuex的存值和取值

搭建Vue界面 
page1




page2




搭建架子
import page1 from '@/views/vuex/page1'
import page2 from '@/views/vuex/page2'
 
 
 {
          path: '/vuex/page1',
          name: 'page1',
          component: page1
        },
        {
          path: '/vuex/page2',
          name: 'page2',
          component: page2
        }
定义变量

在我们的state.js中定义变量

//  定义变量
export  default {
    eduName:'5211314'
}
mutations.js
//设置值
export  default {
    setEeduName:(state,payload)=>{
     
       state.eduName=payload.eduName;
    }
}
getter.js
// /取值
export  default {
    getEeduName:(state)=>{
     return state.eduName;
    }
}
整合资源
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'
Vue.use(Vuex)

const store = new Vuex.Store({
 	state,
 	getters,
 	actions,
 	mutations
 })
 export default store

Vuex的简介以及入门案例_第5张图片

Vuex的简介以及入门案例_第6张图片

Vuex的简介以及入门案例_第7张图片

你可能感兴趣的:(flutter,ios)