vuex的简单使用 (Vuex的简介以及入门案例)

文章编号：1263 / 更新时间：2023-11-10 05:15:48 / 浏览：次

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的入门案例

下载我们的Vuex的插件npm install vuex -S

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