nuxt框架中对vuex进行模块化设置

时间: 2019-08-05阅读: 2051标签: nuxt

1.Nuxt里怎么使用vuex?  

Nuxt.js 内置引用了 vuex 模块,所以不需要额外安装。

Nuxt.js 会尝试找到应用根目录下的 store 目录,如果该目录存在,它将做以下的事情:

1.1> 引用 vuex 模块
1.2> 将 vuex 模块 加到 vendors 构建配置中去
1.3> 设置 Vue 根实例的 store 配置项

Nuxt.js 支持两种使用 store 的方式:
普通方式: store/index.js 返回一个 Vuex.Store 实例
模块方式: store 目录下的每个.js 文件会被转换成为状态树指定命名的子模块 (当然,index 是根模块)


2.Nuxt中怎么对vuex进行模块化设置?  

2.1> 例如 -- 设置index.js为根模块,child1.js与child2.js两个子模块

2.2> 在store/index.js 中不需要返回 Vuex.Store 实例,可以直接将 state、mutations 和 actions 暴露出来:
(以下为例:index中存储商品总价,child1中存储单价,child2中存放数量)

export const state = () =>({
    totalPrice:0,
});
export const mutations = {
    totalPrice (state) { //总价
        // state.totalPrice = state.num*state.price 错误方式:使用子模块的state,应该在变量名前加上文件名,如下
        state.totalPrice = state.child1.price*state.child2.num  //正确方式
    }
};

子模块中同样直接将 state、mutations 和 actions 暴露出来:

child1.js 

export const state = () =>({
    price:10,   //单价
});
export const mutations = {
    getPrice(state,price) {  
        state.price= price
    }
};

child2.js

export const state = () =>({
    num:5,
});
export const mutations = {
    getNum(state,num) {  //数量
        state.num= num
    }
};


3.在vue文件中获取vuex的数据,调用mutation中的方法修改数据  

<script>
export default {
  name : 'test',
  data() {
    return {
      totalPrice:this.$store.state.totalPrice,  //取index.js(根模块)中的值
      num:this.$store.state.child2.num,           //取子模块中的值
      price:this.$store.state.child1.price,       //取子模块中的值
    }
  },
}
</script>
  methods: {
    setTotalPrice(){
      this.$store.commit('totalPrice')
    },
    setNum(){
      this.$store.commit('child2/getNum',参数)    //使用子模块的mutation中的方法 this.$store.commit(‘文件名/方法名’,参数)
    },
    setPrice(){
      this.$store.commit('child1/getPrice',参数)  //使用子模块的mutation中的方法
    },
  },

补充: 使用子模块的action: this.$store.dispatch(‘文件名/变量名’)  

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/5161

Nuxt.js中静态资源的存放位置_assets/static目录区别

在Nuxt.js中静态资源文件分为两类,一类是需要webpack处理的,另外一类是不需要webpack处理的。它们的存放目录是不一样的,下面简单梳理一下。

Travis CI 部署遇到的问题? 部署怎么启动 nuxt服务

uxt打包的静态文件可以直接放在GitHub上面,然后 TravisCI跟GitHub又很亲切,就选择了TravisCI部署。Travis CI 部署到GitHub项目gh-pages分支上,打开页面发现引用资源404?

pm2命令执行启动Nuxt项目

pm2 是一个带有负载均衡功能的Node应用的进程管理器。当你要把你的独立代码利用全部的服务器上的所有CPU,并保证进程永远都活着,0秒的重载, PM2是完美的。在服务器shell中,先安装pm2,安装后pm2 list查看进程列表,如果说pm2未找到,需要设置下环境变量

使用Nuxt.js创建服务器端渲染的Vue.js应用程序

Nuxt.js基于名为Next的热门React库的SSR实现。 为Vue设计了一个名为Nuxt的类似实现。 熟悉React + Next组合的人会在应用程序的设计和布局中发现一些相似之处。 但是,Nuxt提供Vue特有的功能来为Vue创建强大且灵活的SSR解决方案。

服务端预渲染之Nuxt

现在前端开发一般都是前后端分离,mvvm和mvc的开发框架,如Angular、React和Vue等,虽然写框架能够使我们快速的完成开发,但是由于前后台分离,给项目SEO带来很大的不便,搜索引擎在检索的时候是在网页中爬取数据

nuxt.js的使用和开发,一款vue基于服务器SSR渲染工具

一款基于Vue.js的SSR框架——Nuxt.js。是vue进行SSR的一个优选开源项目,可免去繁琐的Webpack、nodejs后台服务配置等操作,方便的搭建一个支持SSR的vue项目。

使用nuxt.js官方脚手架构建koa2的es6编译问题

最近在学用nuxt集成koa2做vue后台,发现官方自带脚手架搭建的koa2使用的仍是es5语法,如果想用es6怎么办呢?这是由于自带脚手架在构建koa2时默认的nodemon是没有使用babel编译的,所以我们首先需要在启动命令后加上 --exec babel-node

Nuxt使用axios跨域问题解决方法

Nuxt 是 Vue 项目服务器端渲染(SSR)解决方案。而在使用时,就会遇到前后端分离情况下的域名或端口不一致导致的跨域问题。本文将介绍如何通过设置代理解决 Nuxt 与 axios 集成的跨域问题。

Nuxt.js部署应用的方式

Nuxt.js 提供了两种发布部署应用的方式:服务端渲染应用部署 和 静态应用部署。静态应用部署就不说了,主要说说服务端渲染应用部署。每次在服务器上执行nuxt build,总是有如下报错,并且jenkins会随之挂掉。

nuxt.js中添加统计代码,添加百度统计,或者google的统计

在 Nuxt.js应用中使用Google统计分析服务,或者百度统计分析服务,推荐在 plugins 目录下创建 plugins/ga.js 文件。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!