vue3 vuex

最新推荐文章于 2024-05-17 14:35:35 发布

好多吃的啊

最新推荐文章于 2024-05-17 14:35:35 发布

阅读量228

点赞数

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/m0_50080847/article/details/128109194

版权

本文介绍了如何在 Vue 项目中安装并配置 Vuex，包括在 main.js 中挂载 store，创建 store 的 index.js 文件定义 state、mutations 和 actions。同时展示了如何通过 useStore 获取和修改 state 变量的方法。

摘要由CSDN通过智能技术生成

安装 vuex

npm i vuex@next -S  //  安装最新vuex

main.js 挂载

// main.js  
  import store from './store' // 导入 vuex

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

store/index.js

import { createStore } from 'vuex'
  
  export default createStore({
    state: {
      login_index: 0,  // 变量
    },
    mutations: {
      act_login(state, index) {  // 修改变量方法
        state.login_index = index
      }
    },
    actions: {
    },
    getters: {
    },
    modules: {
    }
  })

get vuex 变量

<script setup>
import { useStore } from 'vuex'
import { computed } from 'vue'
  let store = useStore()
  let sel = computed(() => store.state.login_index)
</script>

调用方法修改 state 变量

<script setup>
import { useStore } from 'vuex'
  let store = useStore()
  let login = () => {
    store.commit('act_login', 10) // 调用方法修改 state 变量
  }

</script>