# Vuex3练习

**Repository Path**: My-fu/vuex3-exercise

## Basic Information

- **Project Name**: Vuex3练习
- **Description**: 简单的vue2的vuex状态管理的小练习
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-01-09
- **Last Updated**: 2024-01-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Vuex 的练习 mapState... 和 解决多个分类文件引入

## 下载依赖

```
npm install
```

### 搭建本地服务器 并运行起来

```
npm run serve
```

### 打包

```
npm run build
```

## 下载 Vuex 默认最新

```
npm install vuex
```

#### 注意 vue2 下载 vuex@3 vue3 下载 vuex@4

```
npm install vuex@3
```

### 在项目下的 src 文件下 新建文件夹 store/index.js
### 引入 Vuex：

```

import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
    
//准备actions 用于响应组件中的动作
const actions = {
    // 接收到页面传来的数据
    // increment(context,value){
    //     // 然后命名给mutation进行处理
    //     context.commit("INCREMENT",value);
    // },
};
//准备mutation 用于操作数据（state）
const mutations = {
    // 加 最好命名大写
    INCREMENT(state, value) {
        // 第一个参数是state，第二个是值
        state.sum += value;
    },
};
//准备state 用于存储数据
const state = {
    sum: 0, //当前的值
};
//准备getters 用于将state中的数据进行加工
const getters = {
    bigSum(state){
        return state.sum * 10
    }
}

export default new Vuex.Store({
    actions,
    mutations,
    state,
    getters,

    <!-- modules:{
      conutAbout:countOptions,//引入的文件名和文件
      personAbout:personOptions,
    } -->
});

```

### 然后再main.js中引入 store
```

import Vue from 'vue'
import App from './App.vue'

import store from './store/index';
Vue.config.productionTip = false

new Vue({
    render: h => h(App),
    store
}).$mount('#app')

```