小白龙博客 | 小白龙博客

Vuex入门到精通教程

2022-07-17 04:55:51

2025-01-12 09:13:29

简介

vuex是专门用来管理vue.js应用程序中状态的一个插件。他的作用是将应用中的所有状态都放在一起，集中式来管理。需要声明的是，这里所说的状态指的是vue组件中data里面的属性。

vuex组成结构示意图

vuex的特点是把数据单独隔离，形成一棵树状图。单独隔离就意味着它有自己的生态系统。

1.state – 存放状态

2.getters – state的计算属性

3.mutations – 更改状态的逻辑，同步操作

4.actions – 提交mutation，异步操作

5.mudules – 将store模块化

store 中存储的状态是响应式的，当组件从store中读取状态时，如果store中的状态发生了改变，那么相应的组件也会得到更新；

不能直接改变store中的状态。改变store中的状态的唯一途径是提交(commit)mutations。这样使得我们可以方便地跟踪每一个状态的变化。

mutations即变化，修改state的数据，而且只能是同步的，不能存在异步的操作。异步操作要放在actions里，拿到数据再通过mutations同步处理。

安装

shell 复制代码

npm i -S vuex

vuex 的核心概念

目录结构

js 复制代码

/ src
	/ store
		- index.js
		- actions.js
		- mutations.js
		- state.js
		- getters.js

store

vuex 中最关键的是store对象，这是vuex的核心。可以说，vuex这个插件其实就是一个store对象，每个vue应用仅且仅有一个store对象。

创建store

index.js

js 复制代码

import Vue from 'vue'
import Vuex from 'vuex'
import state from './state.js'
import mutations from './mutations.js'
import actions from './actions.js'
import getters from './getters.js'

Vue.use(Vuex)

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

引入store main.js

js 复制代码

import Vue from 'vue'
import App from './App'
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

state

state就是需要管理的状态，即数据

state.js

js 复制代码

export default {
    name: "dd",
    age: 18
}

App.vue

js 复制代码

mounted() {
	this.$store.state.name
}

js 复制代码

//简写
import { mapState } from "vuex";

computed: {
	...mapState(['name'])
}

getters

有时需要对state中的数据进行处理，可以通过getters定义对应函数

getters.js

js 复制代码

export default {
    name(state) {
        return state.name + "tl"
    }
}

App.vue

js 复制代码

mounted(
    this.$store.state.name;//dd
    this.$store.getters.name;//ddt1
}

js 复制代码

//简写
import { mapState,mapGetters } from "vuex";

computed: {
	...mapState(['name']);//dd
	...mapGetters(['name'])//ddt1
}

mutations

mutations即改动的意思，用来定义数据的更新操作

mutations.js

js 复制代码

export default {
    addAge(state) {
        state.age += 1;
    }
}

js 复制代码

mounted() {
	this.$store.state.age;//18
	// 触发mutations需要用commit
	this.$store.commit('addAge');
	this.$store.state.age;//19
}

js 复制代码

//简写
import { mapState,mapMutations } from "vuex";

computed: {
	...mapState(['age']);//dd
	this.addAge();
	...mapState(['age']);//dd1
}

methods: {
     ...mapMutations('addAge');
}

actions

需要异步更新数据,因为数据通常是通过异步的Ajax请求获取的
mutations只能通过commit执行，而这个方法没有返回值，如果在mutations内定义了Promise对象我们也取不到
actions.js

js 复制代码

export default {
    addAgeAsync({commit}) {
        console.log('1')
        return new Promise((resolve, reject)=>{
            console.log('2')
            setTimeout(()=>{
                console.log('4')
                commit('addAge')
            }, 0)
        })
    }
}

App.vue

js 复制代码

mounted() {
  this.$store.state.age
   // 调用actions需要使用dispatch方法,有返回值的
  this.$store.dispatch("addAgeAsync");
  this.$store.state.age
}

js 复制代码

//简写
import { mapState,mapAction } from "vuex";

computed:{
    ...mapState(['age']);//dd变ddt1
 }
mounted() {
	...mapAction(['addAgeAsync']);
}

小技巧(部分修改数据，减少方法定义)

js 复制代码

//背景音乐
bgMusic: {
  path: "",
  isPlay: false,
  isMusic: true
}

updateBgMusic(state, data) {
    //Object.assign方法实行的是浅拷贝
    state.bgMusic = Object.assign({}, state.bgMusic, data);
},
    
let obj = {
   isMusic=!this.bgMusic.isPlay,
   isPlay: true,
   path,
};
this.updateBgMusic(obj);

在一个模块如果想触发其他模块的mutation动态更新state

language 复制代码

 commit('vip/receive', data, {root: true})

参数一：其他模块的 mutations 路径
参数二：传给 mutations 的数据, 如果不需要传数据, 也必须预留,
参数三：第三个参数是配置选项, 申明这个 mutations 不是当前模块的

在一个模块需要使用其他模块的getters

language 复制代码

rootGetters['vip/get']

在一个模块需要使用其他模块的state

language 复制代码

rootState.user.info

language 复制代码

rootState['vip/data']

Vuex数据状态持久化Vuex-persistedstate

作者不再维护啦，以后迁移到Pinia

安装

language 复制代码

npm i -S vuex-persistedstate

1、默认存储到localStorage

引入及配置：在store下的index.js中

jsx 复制代码

import createPersistedState from "vuex-persistedstate"
const store =newVuex.Store({
 state: {},
 mutations: {},
 actions: {},
 plugins: [createPersistedState()]
})

2、存储到sessionStorage

引入及配置：在store下的index.js中

jsx 复制代码

import createPersistedState from "vuex-persistedstate"
const store = newVuex.Store({
   state: {},
   mutations: {},
   actions: {},
   plugins: [createPersistedState({
       storage:window.sessionStorage
   })]
})

3、指定需要持久化的state

引入及配置：在store下的index.js中

kotlin 复制代码

import createPersistedState from "vuex-persistedstate"

const store = newVuex.Store({
 state: {},
 mutations: {},
 actions: {},
 plugins: [createPersistedState({
 storage:window.sessionStorage,
     reducer(val)  {
         return {
             // 只储存state中的token
             assessmentData: val.token
         }
     }
 })]
}）

常见问题

1、指定需要持久化的state，有时会失效

使用全局缓存

运营需要亿点资金维持，您的支持，是小白龙创作的动力！！！

暂无评论，欢迎留下你的评论