vue3 使用vuex

一、什么是vuex

官网：vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.vuex中有哪些模块

• state -------->需要管理的数据存放在这里
• mutations------->唯一可以同步修改state的地方
• actions------->异步修改state,本质还是通过mutations修改
• getters------->类似组件中的计算属性
• modules------->如果需要vuex管理的数据多的话，可以拆分为一个个模块

2.使用vuex

yarn add vuex@next --save
//或者
npm install vuex@next --save

• src/store文件夹下新建modules文件夹
• modules文件夹下新建user.js文件

// 用户
export default {
  // 开启命名空间
  namespaced: true,
  state: {
    info: {
      uname: 'Leo',
      age: 21
    }
  },
  mutations: {
    updateUname(state, val) {
      state.info.uname = val
    },
    updateAge(state, val) {
      state.info.age = val
    }
  },
  actions: {
    asyncUpdate(store, val) {
      setTimeout(() => {
        store.commit('updateAge', val)
      }, 2000)
    }
  },
  getters: {
    format(state) {
      return state.info.uname + ',nice to meet you~'
    }
  }
}

• src/store文件夹下的index.js文件中引入user.js文件

import { createStore } from 'vuex'

import user from './modules/user.js'

export default createStore({
  modules: {
    user
  }
})