• 技术文章 >web前端 >Vue.js

    vue.js如何安装vuex

    coldplay.xixicoldplay.xixi2020-12-01 15:05:09原创321

    vue.js安装vuex的方法:首先进入项目路径后,在项目终端输入相关代码;然后在项目的package json文件中显示vuex插件;接着在项目src目录中新建store js;最后在【main.js】中应用vuex即可。

    本教程操作环境:windows7系统、Vue2.9.6版,该方法适用于所有品牌电脑。

    vue.js安装vuex的方法:

    1、安装:

      进入项目路径后,在项目终端输入:npm install vuex --save 或者 cnpm install vuex --save

    2、安装完成后,会在项目的package.json文件中显示vuex插件,如下:

      "dependencies": {
        "vue": "^2.5.2",
        "vue-router": "^3.0.1",
        "vuex": "^3.3.0"
      },

    3、再项目src目录中新建store.js,文件内容如下:

    import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex);
    export default new Vuex.Store({
        //所有的数据都放在state中
        state:{},
        //操作数据,唯一的通道是mutations
        mutations:{},
        //actions,可以来做异步操作,然后提交给mutations,而后再对state(数据)进行操作
        actions:{}
    })

    4、在main.js中应用vuex:

      导入store,然后再new Vue中使用,代码如下:

    // The Vue build version to load with the `import` command
    // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import store from './store'   //导入store
    Vue.config.productionTip = false
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      store,   //在new Vue中使用
      components: { App },
      template: '<App/>'
    })

    相关免费学习推荐:javascript(视频)

    以上就是vue.js如何安装vuex的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:vue.js vuex
    上一篇:使用vue.js需要注意什么 下一篇:vue mixins是什么
    大前端线上培训班

    相关文章推荐

    • Vue 动态加载 Vuex• vuex有什么用?• vuex的五个属性是什么• 什么时候使用vuex

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网