在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('changeProducts', [{name: '这是一个商品'}]