Vue3中Vuex状态管理库学习笔记

2019ab2024-03-04 20:05

1.什么是状态管理

在开发中，我们会的应用程序需要处理各种各样的数据，这些数据需要保存在我们应用程序的某个位置，对于这些数据的管理我们就称之为状态管理。

在之前我们如何管理自己的状态呢？

  • 在Vue开发中，我们使用组件化的开发方式；
  • 在组件中我们定义data或者在setup中返回使用的数据，这些数据我们称之为state；
  • 在模块template中我们可以使用这些数据，模块最终会被渲染成DOM，我们称之为View；
  • 在模块中我们会产生一些行为事件，处理这些行为事件时，有可能会修改state，这些行为我们称之为actions；

2.Vuex的状态管理

管理不断变化的state本身也是非常困难的：

  • 状态之间相互会存在依赖，一个状态的变化会引起另一个状态的变化，View页面也有可能引起状态的变化；
  • 当应用程序复杂时，state在什么时候，因为什么原因发生了变化，发生了怎么样的变化，会变得非常难以控制和追踪；
    因此，我们是否可以考虑将组件的内部状态抽离出来，以一个全局单例的方式来管理呢？
  • 在这种模式下，我们的组件树构成了一个巨大的 "试图View"；
  • 不管在树的那个位置，任何组件都能获取状态或者触发行为；
  • 通过定义和隔离状态管理中的各个概念，并通过强制性的规则来维护视图和状态间的独立性，我们的代码便会变得更加结构化和易于维护，跟踪；
    这就是Vuex背后的基本思想，它借鉴了Flux，Redux，Elm（纯函数语言，redux有借鉴它的思想）；

当然，目前Vue官网也在推荐使用Pinia进行状态管理，我后续也会进行学习。

3.Vuex的状态管理

4.Vuex的安装

shell 复制代码 
npm install vuex

5.Vuex的使用

在src目录下新建store目录，store目录下新建index.js,内容如下

js 复制代码 
import { createStore } from "vuex";

const store = createStore({
  state:() => ({
    counter:100
  })
})

export default store

在main.js中引用

js 复制代码 
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

App.vue中使用

html 复制代码 
<template>
  <div class="app">
    <h2>App当前计数：{{ $store.state.counter }}</h2>
    <HomeCom></HomeCom> 
  </div>
</template>

<script setup>
  import HomeCom from './views/HomeCom.vue'
</script>

<style>
</style>

6.创建Store

每一个Vuex应用的核心就是store（仓库）：

  • store本质上是一个容器，它包含着你的应用中大部分的状态（state);
    Vuex和单纯的全局对象有什么区别呢？
  1. Vuex的状态存储是响应式的
  • 当Vue组件从store中读取状态的时候，若store中的状态发生变化，那么相应的组件也会被更新；
  1. 你不能直接改变store中的状态
  • 改变store中的状态的唯一途径就是显示提交（commit）mutation；
  • 这样使得我们可以方便的跟踪每一个状态的变化，从而让我们能够通过一些工具帮助我们更好的管理应用的状态；

使用步骤：

  • 创建Store对象；
  • 在app中通过插件安装；

HomeCom.vue

html 复制代码 
<template>
  <div>
    <h2>Home当前计数：{{  $store.state.counter }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script setup>
  import { useStore } from 'vuex';
  const store = useStore()

  function increment(){
    // store.state.counter++
    store.commit("increment")
  }
</script>

<style scoped>

</style>

store/index.js

js 复制代码 
import { createStore } from "vuex";

const store = createStore({
  state:() => ({
    counter:100
  }),
  mutations:{
    increment(state){
      state.counter++
    }
  }
})

export default store

7.在computed中使用Vuex

options-api

html 复制代码 
<h2>Computed当前计数：{{ storeCounter }}</h2>
js 复制代码 
<script>
  export default{
    computed:{
      storeCounter(){
        return this.$store.state.counter
      }
    }
  }
</script>

Componsition-API

html 复制代码 
 <h2>Componsition-API中Computed当前计数：{{ counter }}</h2>
js 复制代码 
 const store = useStore()
  // const setupCounter = store.state.counter; // 不是响应式
  const { counter } = toRefs(store.state);

8.mapState函数

options-api中使用

html 复制代码 
    <!-- 普通使用 -->
    <div>name:{{ $store.state.name }}</div>
    <div>level:{{ $store.state.level }}</div>
    <!-- mapState数组方式 -->
    <div>name:{{ name }}</div>
    <div>level:{{ level }}</div>
    <!-- mapState对象方式 -->
    <div>name:{{ sName }}</div>
    <div>level:{{ sLevel }}</div>
js 复制代码 
<script>
  import { mapState } from 'vuex';
  export default {
    computed:{
      fullname(){
        return 'xxx'
      },
      ...mapState(["name","level"]),
      ...mapState({
        sName:state => state.name,
        sLevel:state => state.level
      })
    }
  }
</script>

Componsition-API

html 复制代码 
  <!-- Setup中  mapState对象方式 -->
    <!-- <div>name:{{ cName }}</div>
    <div>level:{{ cLevel }}</div> -->
    
    <!-- Setup中 使用useState -->
    <div>name:{{ name }}</div>
    <div>level:{{ level }}</div>
    
    <button @click="incrementLevel">修改level</button>
js 复制代码 
<script setup>
  // import { computed } from 'vue';
  // import { mapState,useStore } from 'vuex';
  import { useStore } from 'vuex';
// import useState from '../hooks/useState'
import { toRefs } from 'vue';

  // 1.一步步完成
  // const { name,level } = mapState(["name","level"])
  // const store = useStore()
  // const cName = computed(name.bind({ $store:store }))
  // const cLevel = computed(level.bind({ $store:store }))

  // 2. 使用useState
  // const { name,level } = useState(["name","level"])

  // 3.直接对store.state进行结构(推荐)
  const store = useStore()
  const { name,level } = toRefs(store.state)

  function incrementLevel(){
    store.state.level++
  }
</script>

hooks/useState.js

html 复制代码 
import { computed } from "vue";
import { useStore,mapState } from "vuex";

export default function useState(mapper){
  const store = useStore()
  const stateFnsObj = mapState(mapper)

  const newState = {}
  Object.keys(stateFnsObj).forEach(key=>{
    newState[key] = computed(stateFnsObj[key].bind({$store:store}))
  })

  return newState
}

9.getters的基本使用

某些属性可能需要经过变化后来使用，这个时候可以使用getters：

js 复制代码 
import { createStore } from "vuex";

const store = createStore({
  state:() => ({
    counter:100,
    name:'why',
    level:10,
    users:[
      {id:111,name:'why',age:20},
      {id:112,name:'kobe',age:30},
      {id:113,name:'james',age:25},
    ]
  }),
  mutations:{
    increment(state){
      state.counter++
    }
  },
  getters:{
    doubleCounter(state){
      return state.counter * 2
    },
    totalAge(state){
      return state.users.reduce((preValue,item)=>{
        return preValue + item.age
      },0)
    },
    message(state){
      return `name:${state.name} level:${state.level}`
    }
  }
})

export default store

获取

html 复制代码 
<template>
  <div>
   <button @click="incrementLevel">修改level</button>
   <h2>doubleCounter:{{ $store.getters.doubleCounter }}</h2>
   <h2>usertotalAge:{{ $store.getters.totalAge }}</h2>
   <h2>message:{{ $store.getters.message }}</h2>
  </div>
</template>

<script>
  export default {
    
  }
</script>
<script setup>
  
</script>

<style scoped>

</style>

注意，getter是可以返回函数的

js 复制代码 
 // 获取某一个frends，是可以返回函数的
    getFriendById(state){
      return (id) => {
        const friend = state.friends.find(item=>item.id == id)
        return friend;
      }
    }

使用

html 复制代码 
<h2>friend-111:{{ $store.getters.getFriendById(111) }}</h2>

mapGetters的辅助函数

我们可以使用mapGetters的辅助函数
options api用法

js 复制代码 
<script>
  import { mapGetters } from 'vuex';
  export default {  
    computed:{
      // 数组语法
      // ...mapGetters(["doubleCounter","totalAge","message"]),
      // 对象语法
      ...mapGetters({
        doubleCounter:"doubleCounter",
        totalAge:"totalAge",
        message:"message"}),
      ...mapGetters(["getFriendById"])
    }
  }
</script>

**Composition-API中使用mapGetters **

js 复制代码 
<script setup>
   import { toRefs } from 'vue';
  //  computed
  import { useStore } from 'vuex';
  // mapGetters
  const store = useStore();

// 方式一
// const { message:messageFn } = mapGetters(["message"])
// const message = computed(messageFn.bind({ $store:store }))
// 方式二
const { message } = toRefs(store.getters)
function changeAge(){
  store.state.name = "coder why"
}
// 3.针对某一个getters属性使用computed
const message = computed(()=> store.getters.message)
function changeAge(){
  store.state.name = "coder why"
}
</script>

10. Mutation基本使用

更改Vuex的store中的状态的唯一方法是提交mutation:

js 复制代码 
mutations:{
	increment(state){
		state.counter++
	},
	decrement(state){
	   state.counter--
	 }
}

使用示例
store/index.js

js 复制代码 
import { createStore } from "vuex";

const store = createStore({
  state:() => ({
    counter:100,
    name:'why',
    level:10,
    users:[
      {id:111,name:'why',age:20},
      {id:112,name:'kobe',age:30},
      {id:113,name:'james',age:25},
    ],
    friends:[
      {id:111,name:'why',age:20},
      {id:112,name:'kobe',age:30},
      {id:113,name:'james',age:25},
    ]
  }),
  getters:{
    doubleCounter(state){
      return state.counter * 2
    },
    totalAge(state){
      return state.users.reduce((preValue,item)=>{
        return preValue + item.age
      },0)
    },
    message(state){
      return `name:${state.name} level:${state.level}`
    },
    // 获取某一个frends，是可以返回函数的
    getFriendById(state){
      return (id) => {
        const friend = state.friends.find(item=>item.id == id)
        return friend;
      }
    }
  },
  mutations: {
    increment(state){
      state.counter++
    },
    changeName(state){
      state.name = "王小波"
    },
    changeLevel(state){
      state.level++
    },
    changeInfo(state,userInfo){
      state.name = userInfo.name;
      state.level = userInfo.level
    }
  },
})

export default store
html 复制代码 
<template>
  <div>
   <button @click="changeName">修改name</button>
   <h2>Store Name:{{ $store.state.name }}</h2>
   <button @click="changeLevel">修改level</button>
   <h2>Store Level:{{ $store.state.level }}</h2>
   <button @click="changeInfo">修改level和name</button>
  </div>
</template>

<script>
  export default {
    methods:{
      changeName(){
        console.log("changeName")
        // // 不符合规范
        // this.$store.state.name = "李银河"
        this.$store.commit("changeName")
      },
      changeLevel(){
        this.$store.commit("changeLevel")
      },
      changeInfo(){
        this.$store.commit("changeInfo",{name:'张三',level:'100'});
      }
    }
  }
</script>

<style scoped>

</style>

Mutation常量类型
1.定义常量 store/mutation-type.js

js 复制代码 
export const CHANGE_INFO = "CHANGE_INFO"

2.定义mutation

引入 store/index.js

html 复制代码 
import { CHANGE_INFO } from "./mutation_types";
js 复制代码 
[CHANGE_INFO](state,userInfo){
      state.name = userInfo.name;
      state.level = userInfo.level
   }

3.提交mutation

引入 HomeCom.vue

html 复制代码 
import {CHANGE_INFO } from "@/store/mutation_types"
js 复制代码 
changeInfo(){
        this.$store.commit(CHANGE_INFO,{name:'张三',level:'100'});
      }

10.mapMutations的使用

  1. 在options-api中
html 复制代码 
<template>
  <div>
   <button @click="changeName">修改name</button>
   <h2>Store Name:{{ $store.state.name }}</h2>
   <button @click="changeLevel">修改level</button>
   <h2>Store Level:{{ $store.state.level }}</h2>
   <button @click="changeInfo({name:'张三',level:'1999'})">修改level和name</button>
  </div>
</template> 

<script>
  import { mapMutations } from "vuex";
  import {CHANGE_INFO } from "@/store/mutation_types"
  export default {
    computed:{

    },
    methods:{
      btnClick(){
        console.log("btnClick")
      },
      ...mapMutations(["changeName","changeLevel",CHANGE_INFO])
    }
  }
</script> 

<style scoped>

</style>
  1. composition-api中
html 复制代码 
<template>
  <div>
   <button @click="changeName">修改name</button>
   <h2>Store Name:{{ $store.state.name }}</h2>
   <button @click="changeLevel">修改level</button>
   <h2>Store Level:{{ $store.state.level }}</h2>
   <button @click="changeInfo({name:'张三',level:'1999'})">修改level和name</button>
  </div>
</template> 

<script setup>
  import { mapMutations,useStore } from 'vuex';
  import { CHANGE_INFO } from "@/store/mutation_types"

  const store = useStore();
  // 1.手动映射和绑定
  const mutations = mapMutations(["changeName","changeLevel",CHANGE_INFO])
  const newMutations = {}
  Object.keys(mutations).forEach(key => {
    newMutations[key] = mutations[key].bind({$store:store})
  }) 
  const { changeName,changeLevel,changeInfo } = newMutations
</script>

<style scoped>

</style>

mutation重要原则

1.一条重要的原则就是要记住mutation必须是同步函数

  • 这是因为devtool工具会记录mutation的日记
  • 每一条mutation被记录，devtools都需要捕捉到前一状态和后一状态的快照
  • 但是在mutation中执行异步操作，就无法追踪到数据的变化

11. Actions的基本使用

html 复制代码 
<template>
  <div>
    <h2>当前计数：{{ $store.state.counter }}</h2>
    <button @click="actionBtnClick">发起action</button>
    <h2>当前计数：{{ $store.state.name }}</h2>
    <button @click="actionchangeName">发起action修改name</button>
  </div>
</template> 

<script>
  export default {
    computed:{

    },
    methods:{
      actionBtnClick(){
        this.$store.dispatch("incrementAction")
      },
      actionchangeName(){
        this.$store.dispatch("changeNameAction","bbb")
      }
    }
  }
</script>
<script setup>
 
</script>

<style scoped>

</style>

mapActions的使用

componets-api和options-api的使用

html 复制代码 
<template>
  <div>
    <h2>当前计数：{{ $store.state.counter }}</h2>
    <button @click="incrementAction">发起action</button>
    <h2>当前计数：{{ $store.state.name }}</h2>
    <button @click="changeNameAction('bbbccc')">发起action修改name</button>
    <button @click="increment">increment按钮</button>
  </div>
</template> 

<!-- <script>
 import { mapActions } from 'vuex';
  export default {
    computed:{

    },
    methods:{
      ...mapActions(["incrementAction","changeNameAction"])
    }
  }
</script> -->
<script setup>
   import { useStore,mapActions } from 'vuex';
   const store = useStore();
   const actions =  mapActions(["incrementAction","changeNameAction"]);
   const newActions = {}
   Object.keys(actions).forEach(key => {
    newActions[key] = actions[key].bind({$store:store})
   })
   const {incrementAction,changeNameAction} = newActions;
  //  2.使用默认的做法
  //  import { useStore } from 'vuex';
  // const store = useStore();
  // function increment(){
  //   store.dispatch("incrementAction")
  // }
</script>

<style scoped>

</style>

** actions发起网络请求**

  1. store/index.js文件
js 复制代码 
import { createStore } from "vuex";
import { CHANGE_INFO } from "./mutation_types";
const store = createStore({
  state:() => ({
    counter:100,
    name:'why',
    level:10,
    users:[
      {id:111,name:'why',age:20},
      {id:112,name:'kobe',age:30},
      {id:113,name:'james',age:25},
    ],
    friends:[
      {id:111,name:'why',age:20},
      {id:112,name:'kobe',age:30},
      {id:113,name:'james',age:25},
    ],
    // // 服务器数据
    banners:[],
    recommends:[]
  }),
  getters:{
    doubleCounter(state){
      return state.counter * 2
    },
    totalAge(state){
      return state.users.reduce((preValue,item)=>{
        return preValue + item.age
      },0)
    },
    message(state){
      return `name:${state.name} level:${state.level}`
    },
    // 获取某一个frends，是可以返回函数的
    getFriendById(state){
      return (id) => {
        const friend = state.friends.find(item=>item.id == id)
        return friend;
      }
    }
  },
  mutations: {
    increment(state){
      state.counter++
    },
    changeName(state){
      state.name = "王小波"
    },
    changename(state,name){
      state.name = name
    },
    changeLevel(state){
      state.level++
    },
    // changeInfo(state,userInfo){
    //   state.name = userInfo.name;
    //   state.level = userInfo.level
    // } 
    [CHANGE_INFO](state,userInfo){
      state.name = userInfo.name;
      state.level = userInfo.level
    },
    changeBanners(state,banners){
       state.banners = banners
     },
     changeRecommends(state,recommends){
       state.recommends = recommends
     }
  },
  actions:{
    incrementAction(context){
      // console.log(context.commit) // 用于提交mutation
      // console.log(context.getters) // getters
      // console.log(context.state) // state
      context.commit("increment")
    },
    changeNameAction(context,payload){
      context.commit("changename",payload)
    },
     async fetchHomeMultidataAction(context){
    //   // 1.返回promise，给promise设置then
    //   // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{
    //   //   return res.json().then(data=>{
    //   //     console.log(data)
    //   //   })
    //   // })
    //   // 2.promisel链式调用 
    //   // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{
    //   //   return res.json()
    //   // }).then(data =>{
    //   //   console.log(data)
    //   // })

       // 3.await/async 
       const res = await fetch("http://123.207.32.32:8000/home/multidata")
         const data = await res.json();
         console.log(data);
         // 修改state数据
         context.commit("changeBanners",data.data.banner.list)
         context.commit("changeRecommends",data.data.recommend.list)
         return 'aaaa';
    //   // return new Promise(async (resolve,reject)=>{
    //   //   const res = await fetch("http://123.207.32.32:8000/home/multidata")
    //   //   const data = await res.json();
    //   //   console.log(data);
    //   //   // 修改state数据
    //   //   context.commit("changeBanners",data.data.banner.list)
    //   //   context.commit("changeRecommends",data.data.recommend.list)
    //   //   // reject()
    //   //   resolve("aaaa")
    //   // })

    // }
  }
})

export default store
  1. HomeCom.vue
html 复制代码 
<template>
  <div>
    <h2>Home Page</h2>
    <ul>
      <template v-for="item in $store.state.home.banners" :key="item.acm">
        <li>{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template> 

<script setup>
   import { useStore } from 'vuex';
  //  进行vuex网络请求
  const store = useStore()
  store.dispatch("fetchHomeMultidataAction").then(res=>{
    console.log("home中的then被回调:",res)
  })
</script>

<style scoped>

</style>

module的基本使用

  1. store/index.js文件
js 复制代码 
import { createStore } from "vuex";
import { CHANGE_INFO } from "./mutation_types";
import homeModule from './modules/home'
const store = createStore({
  state:() => ({
    counter:100,
    name:'why',
    level:10,
    users:[
      {id:111,name:'why',age:20},
      {id:112,name:'kobe',age:30},
      {id:113,name:'james',age:25},
    ],
    friends:[
      {id:111,name:'why',age:20},
      {id:112,name:'kobe',age:30},
      {id:113,name:'james',age:25},
    ],
    // // 服务器数据
    // banners:[],
    // recommends:[]
  }),
  getters:{
    doubleCounter(state){
      return state.counter * 2
    },
    totalAge(state){
      return state.users.reduce((preValue,item)=>{
        return preValue + item.age
      },0)
    },
    message(state){
      return `name:${state.name} level:${state.level}`
    },
    // 获取某一个frends，是可以返回函数的
    getFriendById(state){
      return (id) => {
        const friend = state.friends.find(item=>item.id == id)
        return friend;
      }
    }
  },
  mutations: {
    increment(state){
      state.counter++
    },
    changeName(state){
      state.name = "王小波"
    },
    changename(state,name){
      state.name = name
    },
    changeLevel(state){
      state.level++
    },
    // changeInfo(state,userInfo){
    //   state.name = userInfo.name;
    //   state.level = userInfo.level
    // } 
    [CHANGE_INFO](state,userInfo){
      state.name = userInfo.name;
      state.level = userInfo.level
    },
    // changeBanners(state,banners){
    //   state.banners = banners
    // },
    // changeRecommends(state,recommends){
    //   state.recommends = recommends
    // }
  },
  actions:{
    incrementAction(context){
      // console.log(context.commit) // 用于提交mutation
      // console.log(context.getters) // getters
      // console.log(context.state) // state
      context.commit("increment")
    },
    changeNameAction(context,payload){
      context.commit("changename",payload)
    },
    // async fetchHomeMultidataAction(context){
    //   // 1.返回promise，给promise设置then
    //   // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{
    //   //   return res.json().then(data=>{
    //   //     console.log(data)
    //   //   })
    //   // })
    //   // 2.promisel链式调用 
    //   // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{
    //   //   return res.json()
    //   // }).then(data =>{
    //   //   console.log(data)
    //   // })

    //   // 3.await/async 
    //   const res = await fetch("http://123.207.32.32:8000/home/multidata")
    //     const data = await res.json();
    //     console.log(data);
    //     // 修改state数据
    //     context.commit("changeBanners",data.data.banner.list)
    //     context.commit("changeRecommends",data.data.recommend.list)
    //     return 'aaaa';
    //   // return new Promise(async (resolve,reject)=>{
    //   //   const res = await fetch("http://123.207.32.32:8000/home/multidata")
    //   //   const data = await res.json();
    //   //   console.log(data);
    //   //   // 修改state数据
    //   //   context.commit("changeBanners",data.data.banner.list)
    //   //   context.commit("changeRecommends",data.data.recommend.list)
    //   //   // reject()
    //   //   resolve("aaaa")
    //   // })

    // }
  },
  modules:{
    home:homeModule
  }
})

export default store
  1. modules/home.js
js 复制代码 
export default{
  state:()=>({
    // 服务器数据
    banners:[],
    recommends:[]
  }),
  mutations:{
    changeBanners(state,banners){
      state.banners = banners
    },
    changeRecommends(state,recommends){
      state.recommends = recommends
    }
  },
  actions:{
    async fetchHomeMultidataAction(context){
      // 1.返回promise，给promise设置then
      // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{
      //   return res.json().then(data=>{
      //     console.log(data)
      //   })
      // })
      // 2.promisel链式调用 
      // fetch("http://123.207.32.32:8000/home/multidata").then(res=>{
      //   return res.json()
      // }).then(data =>{
      //   console.log(data)
      // })

      // 3.await/async 
      const res = await fetch("http://123.207.32.32:8000/home/multidata")
        const data = await res.json();
        console.log(data);
        // 修改state数据
        context.commit("changeBanners",data.data.banner.list)
        context.commit("changeRecommends",data.data.recommend.list)
        return 'aaaa';
      // return new Promise(async (resolve,reject)=>{
      //   const res = await fetch("http://123.207.32.32:8000/home/multidata")
      //   const data = await res.json();
      //   console.log(data);
      //   // 修改state数据
      //   context.commit("changeBanners",data.data.banner.list)
      //   context.commit("changeRecommends",data.data.recommend.list)
      //   // reject()
      //   resolve("aaaa")
      // })

    }
  }
}
  1. HomeCom.vue
html 复制代码 
<template>
  <div>
    <h2>Home Page</h2>
    <ul>
      <template v-for="item in $store.state.home.banners" :key="item.acm">
        <li>{{ item.title }}</li>
      </template>
    </ul>
  </div>
</template> 

<script setup>
   import { useStore } from 'vuex';
  //  进行vuex网络请求
  const store = useStore()
  store.dispatch("fetchHomeMultidataAction").then(res=>{
    console.log("home中的then被回调:",res)
  })
</script>

<style scoped>

</style>

Modules-默认模块化

Home.vue

html 复制代码 
<template>
  <div>
    <h2>Home Page</h2>
    <h2>Counter模块的counter：{{ $store.state.counter.count }}</h2>
    <h2>Counter模块的doubleCounter：{{ $store.getters.doubleCount }}</h2>
    <button @click="incrementCount">count模块+1</button>
  </div>
</template> 

<script setup>
   import { useStore } from 'vuex';
  //  进行vuex网络请求
  const store = useStore()
  function incrementCount(){
    store.dispatch("incrementCountAction")
  }
</script>

<style scoped>
 
</style>

store/index.js文件

js 复制代码 
const counter = {
  namespaced:true,
  state:() =>({
    count:99
  }),
  mutations:{
    incrementCount(state){
      state.count++
    }
  },
  getters:{
    doubleCount(state,getters,rootState){
      return state.count + rootState.rootCounter
    }
  },
  actions:{
    incrementCountAction(context){
      context.commit("incrementCount")
    }
  }
}

export default counter

修改模块子的值

HomeCom.vue

html 复制代码 
<template>
  <div>
    <h2>Home Page</h2>
    <h2>Counter模块的counter：{{ $store.state.counter.count }}</h2>
    <h2>Counter模块的doubleCounter：{{ $store.getters["counter/doubleCount"] }}</h2>
    <button @click="incrementCount">count模块+1</button>
  </div>
</template> 

<script setup>
   import { useStore } from 'vuex';
  //  进行vuex网络请求
  const store = useStore()
  function incrementCount(){
    store.dispatch("counter/incrementCountAction")
  }
  // module修改或派发根组件
  // 如果我们希望在action中修改root中的state，那么有如下方式
  // changeNameAction({commit,dispatch,state,rootState,getters,rootGetters}){
  //   commit("changeName","kobe");
  //   commit("changeNameRootName",null,{root:true});
  //   dispatch("changeRootNameAction",null,{root:true});
  // }
</script>

<style scoped>
 
</style>

感谢观看，我们下次见

相关推荐
以对_3 分钟前
uview表单校验不生效问题
前端·uni-app
①个程序员15 分钟前
thinkphp 学习记录
学习
alfiy1 小时前
Elasticsearch学习笔记（四） Elasticsearch集群安全配置一
笔记·学习·elasticsearch
Zheng1131 小时前
【可视化大屏】将柱状图引入到html页面中
javascript·ajax·html
向上的车轮1 小时前
Django学习笔记十一：部署程序
笔记·学习·django
程序猿小D1 小时前
第二百六十七节 JPA教程 - JPA查询AND条件示例
java·开发语言·前端·数据库·windows·python·jpa
john_hjy1 小时前
【无标题】
javascript
奔跑吧邓邓子1 小时前
npm包管理深度探索：从基础到进阶全面教程！
前端·npm·node.js
不灭锦鲤2 小时前
ssrf学习（ctfhub靶场）
网络·学习·安全
alfiy2 小时前
Elasticsearch学习笔记(五）Elastic stack安全配置二
笔记·学习·elasticsearch
热门推荐
01组基轨迹建模 GBTM的介绍与实现（Stata 或 R）02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04分享几个惊艳的 Three.js 个人站点05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache