vue3.0使用vuex的过程

@-小飞

已于 2022-03-18 15:11:20 修改

阅读量209

点赞数

文章标签： javascript css css3

于 2022-03-01 18:22:13 首次发布

本文链接：https://blog.csdn.net/m0_64531353/article/details/123212442

版权

本文介绍了在Vue3项目中如何利用Vuex的组合API进行状态管理和方法调用。通过示例展示了在store的index.js文件中的具体实现代码，详细解析了使用过程。

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

在vue3中使用vue2中的写法也可以但是这里我们使用组合api来使用vuex的数据和各种方法

打开store中的index.js 代码如下

// 可以看出与vue2的写法有些区别，但是用法一样
// 但是需要注意的是如果在创建项目时没有安装vuex 则需要自己安装 安装命令是 npm install vuex@next --save 这里需要注意命令的不同 安装的版本就不同
import { createStore } from 'vuex'

export default createStore({
    state: { // 用来写要存储的状态（数据）
        name: '张三',
        age: 16
    },
    getters: { // 相当于vue中的计算属性
        changeAge(state) {
            return state.age + '岁'
        } 
    },
    mutations: { // 修改state数据的唯一方法就是提交mutation
        changeName(state, value) {
            state.name = value
        },

        changeProducts(state, value=[]) {
            state.products = value
        }
    },
    actions: { // 异步处理数据的方法 通过提交mutation修改数据 不建议直接修改 这里直接修改也可以 但是当前情况下框架不完善 所以不建议直接修改
        getProducts({commit}) {
        setTimeout(() => {
            commit('changePr