# vue-vite-learn

**Repository Path**: freewsf/vue-vite-learn

## Basic Information

- **Project Name**: vue-vite-learn
- **Description**: vue vite ts 集成开发环境
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-07
- **Last Updated**: 2024-03-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### vue3+vite+ts 学习笔记

#### 1.执行npm i 报错： Error: EPERM: operation not permitted
```plaintext
这个问题是由于node的node_cache目录对于一般的用户没有权限导致的，vscode很奇怪的是，即使你使用管理员启动，但是在终端执行的时候，其实还是用的一般用户启动的，所以无法操作缓存目录。
使用npm config list，查看 cache目录
设置cache目录的安全选项，设置user用户的完全控制权限即可解决。
```

#### 2.引入路由  -S为--save的简写，为生产环境，-D 为开发环境
```shell
npm install vue-router -S  
```
#### 3.引入按需自动加载element-plus
```shell
npm i element-plus -S
```
#### 4.引入自动按需加载elemnet-plus插件
```shell
npm i  unplugin-vue-components -S
```

#### 5.vue3中使用vuex 
[参考文档地址](https://vuex.vuejs.org/zh/) 

在vue3中使用vuex需要使用vue4.0版本

#### 1.使用 `createStore`方法来创建storep实例
```
import { createStore } from 'vuex'

export const store = createStore({
  state () {
    return {
      count: 1
    }
  }
})
```
#### 2.要将 Vuex 安装到 Vue 实例中，需要用 store 替代之前的 Vuex 传递给 use 方法
```vue3
import { createApp } from 'vue'
import { store } from './store'
import App from './App.vue'

const app = createApp(App)

app.use(store)

app.mount('#app')
```
#### 3. getters mutation store.commit的使用
1. getters的使用说明
```
定义getter
getters就是在state上进行的封装
getters可以对state里面的数据起到过滤的作用，比如返回角色是超级管理员的用户。

const getters = {
    getUserInfo(state?: IState) {
        return state?.user
    },

    isAdmin: (state?: IState) => (id: number) => {
        return id === state?.admin.id
    }
}


```
2. mutation的使用说明
```
 更改Vuex的store中的状态的唯一方法是提交mutation。接受state作为第一个参数。
 mutation本质上是一个回调函数，无法直接调用的，
 定义一个mutation 相当于发布或者注册一个回调函数，方法名为 事件的类型
 是通过commit来调用的，并且只能同步使用

 const mutations = {
    setUserInfo(state:IState,user:IUserInfo)
    {
      state.user = user
    }
  }
```
3. commit的使用
```
 commit使用mutation中函数
 commit 就相当于订阅事件，订阅 mutation中发布的事件。
 store.commit('事件类型即方法名',参数值)
  
 使用commit有两种方式

 把载荷和type分开提交
store.commit('increment', {
 amount: 10
})

整个对象都作为载荷传给mutation函数
store.commit({
 type: 'increment',
 amount: 10
})

```
`从第二种方式可以看到，commit就是相当于订阅了type为increment的回调函数`

4. 注册getters,mutations到store中去
```typescript
import { createStore } from "vuex"
import { type IState, IUserInfo } from "../models/IUserInfo"

// 定义约束
const state: IState = {
    user: {
        id: "1",
        account: "freewsf@qq.com",
        avatar: "string",
        nickname: "wy",
        status: 1,
    } as IUserInfo,
    admin: {
        id: 0
    }
}

/*
* 定义getter
* getters就是在state上进行的封装
* getters可以对state里面的数据起到过滤的作用，比如返回角色是超级管理员的用户。
*/
const getters = {
    getUserInfo(state?: IState) {
        return state?.user
    },

    isAdmin: (state?: IState) => (id: number) => {
        return id === state?.admin.id
    }
}

/*
 * mutation 
 * 更改Vuex的store中的状态的唯一方法是提交mutation。接受state作为第一个参数。
 * mutation本质上是一个回调函数，无法直接调用的，
 * 定义一个mutation 相当于发布或者注册一个回调函数，方法名为 事件的类型
 * 是通过commit来调用的，并且只能同步使用
 */
const mutations = {
    setUserInfo(state:IState,user:IUserInfo)
    {
      state.user = user
    }
  }

/**
 * commit使用mutation中函数
 * commit 就相当于订阅事件，订阅 mutation中发布的事件。
 * store.commit('事件类型即方法名',参数值)
 * 
 * // 使用commit有两种方式
 */


//配置store
const store = createStore({
    state: state,
    getters: getters,
    mutations: mutations,
    methods:{
        
    }
})

export default store
```