vuex

最新推荐文章于 2022-01-06 21:26:29 发布

原创最新推荐文章于 2022-01-06 21:26:29 发布 · 206 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vuex

vuejs 专栏收录该内容

8 篇文章

订阅专栏

本文分享了使用Vuex和Vue.js构建单页应用的实战经验，包括解决编译错误的技巧，深入解析Vuex的mapState、mapActions等辅助函数的用法，以及Vuex的四大核心概念。

vuex

不错的教程：

使用 Vuex + Vue.js 构建单页应用

在按上面的教程搭建项目的过程中，有遇到小面的问题：

1.提示Extra semicolon错误

参考：

在.eslintrc.js中的rules添加"semi": ["error", "always"],
在webpack.base.conf.js中注释掉如下的内容：

const createLintingRule = () => ({
  // test: /\.(js|vue)$/,
  // loader: 'eslint-loader',
  // enforce: 'pre',
  // include: [resolve('src'), resolve('test')],
  // options: {
  //   formatter: require('eslint-friendly-formatter'),
  //   emitWarning: !config.dev.showEslintErrorsInOverlay
  // }
})

vuex属于vue生态的一部分，记录下使用过程中遇到的问题

1.mapState、mapActions

在看别人源码的过程中，有组件中有看到这样使用，如下：

<script>
    import {mapState, mapActions} from 'vuex'
    export default {
    	data(){
            return{

            }
        },
        mounted(){
            //获取用户信息
            this.getUserInfo();

        },
        props: ['signinUp', 'headTitle', 'goBack'],
        computed: {
            ...mapState([
                'userInfo'
            ]),
        },
        methods: {
            ...mapActions([
                'getUserInfo'
            ]),
        },

    }

</script>