# vue

**Repository Path**: xiyg/vue

## Basic Information

- **Project Name**: vue
- **Description**: vue前端项目，主要使用vue进行前端布局
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/xiyg
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-30
- **Last Updated**: 2023-05-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# [vue](https://blog.csdn.net/u010174083/article/details/119065315)
#### [vue3.0使用vuex](https://blog.csdn.net/weixin_57811717/article/details/124414186)
#### vue2.0使用 vuex
[vuex使用](https://blog.csdn.net/wyhc2021/article/details/105975494?share_token=7E1E4059-D9E3-4A5C-A3F2-61F3E196BB5F&tt_from=weixin&utm_source=weixin&utm_medium=toutiao_ios&utm_campaign=client_share&wxshare_count=1)
1. 在根目录下安装xuex

```
npm install vuex --save
```
2. 在src下新建store文件夾，在文件夾下新建index.js
```
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
   state: {
      count: 0
   },
   getters: {
      getStateCount:function(state){
        return state.count + 1
      }
   },
//    getters: {
//      getStateCount:(state)=> state.count + 1
//    }
   mutations:{
      add(state){
        state.count  = state.count + 1
      },
      reduce(state,n){
        state.count = state.count - n;
      }
   },
   actions:{
      addfun(context){
        context.commit('add')
      },
      reducefun(context,n){
        context.commit('reduce',n)
      }
   }
})

export default store

```
3.  然后我们在main.js文件中引入该文件，在文件里面添加 import store from ‘./store’;，再在vue实例全局引入store对象；
![输入图片说明](%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20221202183636.png)

4. 使用

```
<template>
    <div>
        <div>{{this.$store.state.count}}</div>
        <div>{{count1}}</div>
        <div>{{this.$store.getters.getStateCount()}}</div>
        <button @click="addfun"></button>
        <button @click="reducefun"></button>
    </div>
</template>

<script>

import {mapState,mapGetters,mapActions} from 'vuex'
export default {
    name: 'TodoListStatistics',
    // inject:['user','todoLength'],
    mixins:[myMixin],
    data() {
        return {
            noActivated: false,
            message: 'goodbye',
            bar: 'def'
        };
    },

    created() {
        console.log('com hook called')
    },
    mounted() {
        console.log(this.$data)
    },
    directives: {
        focus: {
            // 指令的定义
            mounted(el) {
            el.focus()
            }
        }
    },

    methods: {
        bar() {
        console.log('bar')
        },
        conflicting() {
        console.log('from self')
        },
        addfun(){
            // this.$store.commit('add')
            this.$store.dispatch('addfun')
        },
        reducefun(){
            // this.$store.commit('reduce')
            this.$store.dispatch('reducefun',n)
        }
    },
    computed:{
        ...mapState({
            count1:state => state.count
        })
    }
};
</script>

<style scoped>
.shake {
  animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  perspective: 1000px;
}
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 0, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 0, 0);
  }
}
</style>
```



#### vue插件
vue插件使用
简单来说，插件就是指对Vue的功能的增强或补充。

比如说，让你在每个单页面的组件里，都可以调用某个方法，或者共享使用某个变量，或者在某个方法之前执行一段代码等

1. 新建插件文件夹plugins,新建service.js文件
```
export default {
    install: function(Vue,options){
        //插件代码
    }
}
```
2. 注册插件
如果使用过Vue-router，就很好理解，通过import引入后，然后通过 Vue.use(插件名) 注册插件；
例如，我们通常在main.js里引入各种东西，并且组件的根实例也在这里

```
//main.js
import Vue from 'vue'
import App from './App.vue'
 
//关键是这两行
import service from './service.js'
Vue.use(service)
 
new Vue({
  el: '#app',
  render: (h) => h(App)
})
```
如代码中注释所说，关键是通过import导入service文件，然后在创建根组件之前，让Vue对象通过use方法来注册插件service。

通过这样简单的两步，就可以使用插件了。
3. 插件的逻辑

```
export default {
    install: function(Vue,options){
        //插件代码
       //以下内容都是添加到上面install的函数里面的
 
        // 1. 添加全局方法或属性
        Vue.myGlobalMethod = function () {
          // 逻辑...
        }
        // 2. 添加全局资源
        Vue.directive('my-directive', {
          bind (el, binding, vnode, oldVnode) {
            // 逻辑...
          }
          ...
        })
        // 3. 注入组件
        Vue.mixin({
          created: function () {
            // 逻辑...
          }
          ...
        })
        // 4. 添加实例方法
        Vue.prototype.$myMethod = function (options) {
          // 逻辑...
        }
    }
}
```
4. 使用插件


#### 安装教程

1.  xxxx
2.  xxxx
3.  xxxx

#### 使用说明

1.  xxxx
2.  xxxx
3.  xxxx

#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)