VUEX状态管理工具笔记

VUEX

全局状态管理模式 数据的集中管理

src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// store  仓库
export default new Vuex.Store({
   // state 就是容器  数据保存的位置
  state: {  
    user: ''  // 变量名 储存用
 },
 // mutations 是方法的集合 修改数据的唯一方式 必须是同步的
 mutations: {  
   // setUser 函数名 可自定义
   setUser (state, user) {//第一个是固定写法 第二个形参
     state.user = user // 容器里的变量 形参通过调用传入
    }
  },
  // 处理异步操作的地方
  actions: {
    // 函数 自定义
    login(context,payload){//第一个是固定写法 第二个形参
    }
  },
  // 模块  可以将容器里的变量模块单独封装 引入到这里
  modules: {
  },
  getters
})

main.js

import store from './store/index.js'

const app = new Vue({
  ...App,
  store
})

在其他组件的调用方法 将数据存到容器里

// 触发mutations里的函数
this.$store.commit('自定义函数名', 实参) 

// 触发actions 里的函数
this.$store.dispatch('自定义函数名',实参)

获取vuex容器里的值

import { mapState } from 'vuex';

computed: {
    ...mapState(['user']) 
  // 相当于把vuex里的user变量放到当前页面的data()里 是一个对象
    // 相当于全局变量  在事件函数里用this.user可以读取
},
mounted() {  // 生命周期函数自执行  打印测试一下
    console.log(this.user);  // 用this.可以读取  
}

模块单独封装

举例 user.js

export default {
  // 模块具备单独的命名空间
  namespaced: true,
  // state 就是容器  数据保存的位置
  state: {
      user:{}  // 变量
  },
  // mutations 修改数据的唯一方式 必须是同步的
  mutations: {
    setUser (state, user) {//第一个是固定 第二个形参
     state.user = user // 容器里的变量 形参通过调用传入
    }
  },
  // 处理异步操作的地方
  actions: {
     login(context,payload){//第一个是固定写法 第二个形参	
     context.commit('setUser',实参) // 可以调用mutations 里的方法 将数据传过去
    }
  }
}

index 中

import Vue from 'vue'
import Vuex from 'vuex'
// 引入 user模块
import user from './modules/user'
// 引入getters
import getters from './getters'
// 可以在getters里写映射 方便读取vuex里的数据

Vue.use(Vuex)

const store = new Vuex.Store({
  // 模块
  modules: {
    user // user模块
  },
  getters  // 使用getters
})

export default store

index同级 getters.js

const getters = {
  // 将user模块中的token变量映射出去
  token: state => state.user.token,
  // 将user模块中的用户信息变量对象中的名字属性映射出去
  name: state => state.user.userinfo.username,
  // 将user模块中的用户信息对象中的头像属性映射出去
  staffPhoto: state => state.user.userinfo.staffPhoto,
  // 可以在外面利用 getters里映射出去的名字快速获取
}
export default getters

在其他组件内调用模块里的方法

// 触发user模块里 mutations 里的函数
this.$store.commit('user/setUser', 实参) 

// 触发user模块里 actions 里的函数
this.$store.dispatch('user/login',实参)

获取vuex容器里的值 普通写法

this.$store.state.user模块.user变量

利用getters 获取 vuex容器里的值

this.$store.getters.在getters里映射的名字

import { mapGetters } from 'vuex'  // 引入

computed: { // 计算属性里
    ...mapGetters([ // 对应getters里映射出的名字
      'sidebar',
      'staffPhoto',
      'name'
    ])
 },
// 相当于放到了全局变量里  {{ name }} 就可使用

v3使用VUEX

vuex

import { createStore } from 'vuex'

export default createStore({
  // state 就是容器  数据保存的位置
  state: {
  },
  // mutations 是方法的集合 修改数据的唯一方式 必须是同步的
  mutations: {

  },
  // 处理异步操作的地方
  actions: {

  },
  // 模块  可以将容器里的变量模块单独封装 引入到这里
  modules: {
  }
})

页面里

import { useStore } from 'vuex'
const store = useStore()

// 读取数据
const list = computed(() => {
  return store.state.数据名
})

// 调用方法
store.commit('方法名')
store.dispatch('方法名')