Nuxt使用Vuex的方法示例


Posted in Javascript onSeptember 06, 2019

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

基础知识这里不再重述,学习的话请自行到官网学习https://vuex.vuejs.org/zh/

文档最后有具体使用的实例,不想看基础的就直接下调页面~

Nuxt使用Vuex的方法示例

这里主要简单讲一讲Nuxt里怎么使用vuex,

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

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

  • 引用vuex模块
  • vuex模块 加到 vendors 构建配置中去
  • 设置Vue根实例的store配置项

Nuxt.js 支持两种使用store的方式,你可以择一使用:

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

普通方式

使用普通方式的状态树,需要添加store/index.js文件,并对外暴露一个 Vuex.Store 实例:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = () => new Vuex.Store({

 state: {
  counter: 0
 },
 mutations: {
  increment (state) {
   state.counter++
  }
 }
})

export default store

现在我们可以在组件里面通过this.$store来使用状态树

<template>
 <button @click="$store.commit('increment')">{{ $store.state.counter }}</button>
</template>

模块方式

状态树还可以拆分成为模块,store目录下的每个.js文件会被转换成为状态树指定命名的子模块

使用状态树模块化的方式,store/index.js不需要返回 Vuex.Store 实例,而应该直接将statemutationsactions暴露出来:

export const state = () => ({
 counter: 0
})

export const mutations = {
 increment (state) {
  state.counter++
 }
}

其他的模块文件也需要采用类似的方式,如store/todos.js文件:

export const state = () => ({
 list: []
})

export const mutations = {
 add (state, text) {
  state.list.push({
   text: text,
   done: false
  })
 },
 remove (state, { todo }) {
  state.list.splice(state.list.indexOf(todo), 1)
 },
 toggle (state, todo) {
  todo.done = !todo.done
 }
}

在页面组件pages/todos.vue, 可以像下面这样使用todos模块:

<template>
 <ul>
  <li v-for="todo in todos">
   <input type="checkbox" :checked="todo.done" @change="toggle(todo)">
   <span :class="{ done: todo.done }">{{ todo.text }}</span>
  </li>
  <li><input placeholder="What needs to be done?" @keyup.enter="addTodo"></li>
 </ul>
</template>

<script>
import { mapMutations } from 'vuex'

export default {
 computed: {
  todos () { return this.$store.state.todos.list }
 },
 methods: {
  addTodo (e) {
   this.$store.commit('todos/add', e.target.value)
   e.target.value = ''
  },
  ...mapMutations({
   toggle: 'todos/toggle'
  })
 }
}
</script>

<style>
.done {
 text-decoration: line-through;
}
</style>

模块方法也适用于顶级定义,而无需在store目录中实现子目录

state 示例,您需要创建一个文件store/state.js并添加以下内容:

export default () => ({
 counter: 0
})

并且相应的 mutations 在文件store/mutations.js中:

export default {
 increment (state) {
  state.counter++
 }
}

模块文件

您可以将模块文件分解为单独的文件:state.js,actions.js,mutations.jsgetters.js。如果您使用index.js来维护state,getters,actionsmutations,同时具有单个单独的操作文件,那么仍然可以正确识别该文件。

项目结构

vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:

  1. 应用层级的状态应该集中到单个 store 对象中。
  2. 提交mutation是更改状态的唯一方法,并且这个过程是同步的。
  3. 异步逻辑都应该封装到action里面。

只要你遵守以上规则,如何组织代码随你便。如果你的 store 文件太大,只需将 action、mutation 和 getter 分割到单独的文件。

对于大型应用,我们会希望把 Vuex 相关代码分割到模块中。下面是项目结构示例:

├── index.html
├── main.js
├── api
│  └── ... # 抽取出API请求
├── components
│  ├── App.vue
│  └── ...
└── store
  ├── index.js     # 我们组装模块并导出 store 的地方
  ├── actions.js    # 根级别的 action
  ├── mutations.js   # 根级别的 mutation
  └── modules
    ├── cart.js    # 购物车模块
    └── products.js  # 产品模块

下面用是实例说一下怎么使用

一、在Nuxt项目的store目录下新建一个index.js文件,这样项目就启用了vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = () => new Vuex.Store({

 state: {
  counter: 0
 },
 mutations: {
  increment (state) {
   state.counter++
  }
 }
})

export default store

一般这个文件我们只作为vuex的入口文件,不在这里面写业务代码,其他的功能写在其他的vuex文件中,在index中导入一下即可

二、在store文件夹里再新建一个filter.js文件,在index.js中引入一下,这个文件来写我们的业务代码

filter.js文件

const state = ({
 value: 'Hello World',
 list: [1, 2, 3, 4, 5]
});
const getters = {
 include: (state) => (val) => {
  return state.list.indexOf(val) > -1;
 }
 }
;
const mutations = {
 SET_VALUE(state, value) {
  state.value = value;
 }
};
const actions = {
 async getInfo({state, commit}, val) {
  commit('SET_VALUE', val);
 }
};

export default {
 namespaced: true,
 state,
 getters,
 actions,
 mutations
};

这个文件中输出时候的namespaced属性,如果为true时,使用这个文件的方法时,需要标注namespace,不写或为false时,则可以直接使用,这里建议使用namespaced,因为大型项目可能有很多复杂的业务,可能命名冲突,使用namespaced可以把方法区分开,避免很多问题

index.js文件

import Vue from 'vue';
import Vuex from 'vuex';
import filter from './filter';

Vue.use(Vuex);

const store = () => new Vuex.Store({
 state: {
 },
 mutations: {
 },
 modules: {
  filter
 }
});

export default store

在index.js文件中import一下我们的filter.js文件,然后在modules中引入即可使用

三、在vue文件中使用vuex

index.vue

<template>
 <section class="p-10">
  <h1> {{ value }} </h1>
  <h1> {{ result }} </h1>
  <el-button type="danger" @click="change">点击</el-button>
 </section>
</template>

<script>
 import { mapState, mapMutations, mapActions, mapGetters } from 'vuex';
export default {
 data() {
  return {
   result: false
  };
 },
 computed: {
  ...mapGetters('filter', [
   'include'
  ]),
  ...mapState({
   value: state => state.filter.value
  })
 },
 methods: {
  ...mapMutations('filter', [
   'SET_VALUE'
  ]),
  ...mapActions('filter', [
   'getInfo'
  ]),
  change() {
   // this.result = this.include(1);
   // this.getInfo('你好');
   // this.SET_VALUE('HELLO');
  }
 },
 mounted() {
 },
 beforeDestroy() {
 }
};
</script>

1.在vue文件中,首先通过import { mapState, mapMutations, mapActions, mapGetters } from 'vuex' 来引入我们需要的模块,按需引用,只需要引入本页面用到的模块即可

2.mapGetters和mapState需要在页面的计算属性computed中引入,mapMutations和mapActions需要在methods中引入,此时要注意模块的命名空间,如果vuex文件导出时标注了namespaced,我们使用时也需要写出才可以找到,反之则不需要

3.首先是mapState,使用mapState时,我有两种方法来取,两种方式都可以,这个方法是从store中取出这个变量,然后显示在此页面上,store变动的话,此页面也会跟着动态改变

...mapState({
   value: state => state.filter.value
  })
...mapState('filter', {
   value: state => state.value
  })

4.mapGetters类似于store的计算属性,我们可以通过mapGetters的方法在store里进行计算,然后返回我们需要的结果即可

上面例子就是点击按钮的时候传了一个数字到store里,然后判断store里的list是否包含这个数字,然后返回结果到页面,页面根据返回值重新刷新数据

5.MapMutation是更改store中状态的唯一方法,Vuex 中的 mutation 非常类似于事件:每个 mutation 都有一个字符串的事件类型 (type)和 一个回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数

上面的例子是点击按钮时,直接通过mutation 的方法修改了store里的数据,然后把数据同步到页面

6.mapAction类似于mutation, 但是Action提交的是mutation,而不是直接变更状态,Action可以包含任意异步操作,我们一般把异步获取数据的方法都放在这里,然后在回调函数里使用mutation里的方法把异步获取的数据保存在store里,然后把store里的数据传到页面

上面的例子是点击按钮时调用了action里的异步方法,然后在方法的回调函数里修改了store的数据,一般这里是把请求的结果进行保存,这里是省略了请求API方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现图片轮换效果代码
Apr 16 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
Feb 19 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
利用try-catch判断变量是已声明未声明还是未赋值
Mar 12 Javascript
JavaScript中跨域调用Flash的方法
Aug 11 Javascript
AngularJS模块学习之Anchor Scroll
Jan 19 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
jQuery针对input的class属性写了多个值情况下的选择方法
Jun 03 Javascript
原生javascript 学习之js变量全面了解
Jul 14 Javascript
bootstrapValidator表单验证插件学习
Dec 30 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
Feb 26 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 Javascript
vue中input的v-model清空操作
Sep 06 #Javascript
nuxt框架中对vuex进行模块化设置的实现方法
Sep 06 #Javascript
layui 表格操作列按钮动态显示的实现方法
Sep 06 #Javascript
基于Vue和Element-Ui搭建项目的方法
Sep 06 #Javascript
微信小程序 搜索框组件代码实例
Sep 06 #Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 #Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
Sep 06 #Javascript
You might like
Terran魔法科技
2020/03/14 星际争霸
php中函数的形参与实参的问题说明
2010/09/01 PHP
PHP中如何实现常用邮箱的基本判断
2014/01/07 PHP
PHP轻量级数据库操作类Medoo增加、删除、修改、查询例子
2014/07/04 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
javascript FormatNumber函数实现方法
2008/12/30 Javascript
几种延迟加载JS代码的方法加快网页的访问速度
2013/10/12 Javascript
一个JavaScript处理textarea中的字符成每一行实例
2014/09/22 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
AngularJs $parse、$eval和$observe、$watch详解
2016/09/21 Javascript
EasyUI学习之Combobox下拉列表(1)
2016/12/29 Javascript
JS中使用 after 伪类清除浮动实例
2017/03/01 Javascript
Vue中fragment.js使用方法详解
2017/03/09 Javascript
详解Js中的模块化是如何实现的
2017/10/18 Javascript
原生JS写Ajax的请求函数功能
2017/12/22 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
安装dbus-python的简要教程
2015/05/05 Python
Python面向对象之Web静态服务器
2019/09/03 Python
Django 5种类型Session使用方法解析
2020/04/29 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
CSS3媒体查询(Media Queries)介绍
2013/09/12 HTML / CSS
YSL Beauty加拿大官方商城:圣罗兰美妆加拿大
2017/05/15 全球购物
C#实现启动一个进程
2016/10/01 面试题
专营店会计助理岗位职责
2013/11/29 职场文书
大学生家政服务项目创业计划书
2014/01/30 职场文书
《圆明园的毁灭》教学反思
2014/02/28 职场文书
学校社会实践活动总结
2014/07/03 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
罚站检讨书
2015/01/29 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript