vuex It is widely used in medium and large projects , Generally, the data used globally will be placed in vuex in , Convenient for other pages , In project ,vuex Most of the data stored in user_id, Authority and other information , So in vue3 How to use in vuex And ? With this question , In this article , Let's analyze it together
actually vue3 Used in vuex and vue2 use vuex Roughly the same , All through state Store data , adopt mutations To change vuex Data in , For asynchronous cases , adopt actions Submit mutations And then change vuex Data in , With this idea, let's use it together vue3 Medium vuex
Before you start writing code , Let's first look at my directory structure ： stay store Under file , take vuex It is divided into the following ts file
stay index.ts in , Assign the exposed methods of these modules to the corresponding modules
1, How to use vuex Data stored in
state and vue2 equally , Are places to store data , The writing is the same , Here I define a count attribute , Initialize as 0
const state = { count: 0, } export { state }
Then we were vue3 The method of use in is as follows ： First from vuex Introduced in useStore function , His return value is a vuex example
<template> <h1>vuex Data in {{ store.state.count }}</h1> </template> <script
lang="ts"> import { defineComponent } from "vue" import { useStore } from
"vuex" export default defineComponent({ name: "index", setup() { const store =
useStore() return { store } }, }) </script>
In the console , Print this store Can see store Some properties on , Obviously, he is one vuex Instance of , It has getter,dispatch,state Equal attribute
2. How to change vuex Properties in
vue3 and vue2 equally , All through submission mutations Methods in , Conduct alignment vuex Change of data in , How to use it ? First, let's take a look mutations Writing in
const mutations = { addCount(state, payload) { state.count += payload }, }
export { mutations }
here , Defines a addCount method , This method accepts two parameters , The first parameter is to be changed state object
（ Of course, you can also write state.count, And then mutations Medium direct state += payload That's it ）,
The second parameter is the data to be changed , For example +1 operation
<template> <h1>vuex Data in {{ store.state.count }}</h1> <button
@click="changeStoreCount"> change vuex data </button> </template> <script lang="ts">
import { defineComponent } from "vue" import { useStore } from "vuex" export
default defineComponent({ name: "index", setup() { const store = useStore()
console.log(store) const changeStoreCount = () => { //
Submitted here mutations Medium addCount method store.commit("addCount", 1) } return { store,
changeStoreCount } }, }) </script> <style scoped></style>
3, How to change asynchronously vuex Data for
stay vue2 in actions adopt dispach ->
mutations Method in , stay vue3 The same is true in , But it should be noted that ,vue3 in actions The first parameter of is fixed , Is current vuex Instance of , It doesn't need you to deliver , The second parameter is the data to be operated on , Here , Used by the author
+2 operation
const actions = { asyncAddStoreCount(store, payload) { //
The first parameter is vuex Fixed parameters , No need to transfer manually store.commit("addCount", payload) }, } export {
actions } <template> <h1>vuex Data in {{ store.state.count }}</h1> <button
@click="changeStoreCount"> change vuex data </button> <button
@click="asyncChangeStoreCount"> Asynchronous change vuex data </button> </template> <script
lang="ts"> import { defineComponent } from "vue" import { useStore } from
"vuex" export default defineComponent({ name: "index", setup() { const store =
useStore() console.log(store) const changeStoreCount = () => {
store.commit("addCount", 1) } const asyncChangeStoreCount = () => {
setTimeout(() => { // asyncAddStoreCount yes mutations Methods in ,2 Is to pass on past data //
Asynchronous change vuex use dispatch method , Here setTimeout Simulate asynchronous operation store.dispatch("asyncAddStoreCount", 2)
}, 1000) } return { store, changeStoreCount, asyncChangeStoreCount } }, })
</script> <style scoped></style>
design sketch ：
1, initial ：
2, click 【 change vuex data 】 Button ：
3, click 【 Asynchronous change vuex data 】（ Change after one second ）
last , Someone knows CSDN What happened GIF Pictures of , If you have any, please teach me !
Hard to create , Thank you for your praise ; Something wrong , Please comment or point out in a private letter !!! Let's study together , Common progress !!
Technology