Nuxt使用Vuex的方法示例

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

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

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

这里主要简单讲一讲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方法

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

(0)

相关推荐

  • nuxt框架中对vuex进行模块化设置的实现方法

    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 实例 模块方式:

  • Nuxt使用Vuex的方法示例

    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 基础知识这里不再重述,学习的话请自行到官网学习https://vuex.vuejs.org/zh/ 文档最后有具体使用的实例,不想看基础的就直接下调页面~ 这里主要简单讲一讲Nuxt里怎么使用vuex, Nuxt.js 内置引用了vuex模块,所以不需要额外安装. Nuxt.js 会尝试找到应用根目录下的store目录,如果该目录存在,它将

  • vuex存储token示例

    1.在login.vue中通过发送http请求获取token //根据api接口获取token var url = this.HOST + "/session"; this.$axios.post(url, { username: this.loginForm.username, password: this.loginForm.pass }).then(res => { // console.log(res.data); this.$message.success('登录成功'

  • Vue的状态管理vuex使用方法详解

    引入vuex 当访问数据对象时,一个 Vue 实例只是简单的代理访问.所以,如果有一处需要被多个实例间共享的状态,可以简单地通过维护一份数据来实现共享 const sourceOfTruth = {} const vmA = new Vue({ data: sourceOfTruth }) const vmB = new Vue({ data: sourceOfTruth }) 现在当 sourceOfTruth 发生变化,vmA 和 vmB 都将自动的更新引用它们的视图.子组件们的每个实例也会

  • 在react中使用vue的状态管理的方法示例

    我是要介绍一个新的 react 全局共享状态管理器,它和 vue 组件的状态管理一起同工之妙. 马上体验 在 react 状态管理领域,react-redux 可谓是只手遮天了,基于 flux 思想实现,小巧,immutable 的思想让数据变化可控.但 immutable 所带来的编程代价太大了,如果你要更新一个深层结构的对象的某个节点,写作将会是极其麻烦的一件事,而且还保不准会出错.为了保证 immutable,redux 的 reducer 机制让开发者掉光了头发.于是有了类似 dva.r

  • 实现vuex原理的示例

    效果图如下: 1. 准备好环境 使用 vue/cil 初始化项目配置: npm install -g @vue/cli //全局安装@vue/cli vue create demo-vue //创建项目 yarn add vuex安装vuex创建一个store文件夹并使用: 2. 实现目的 stroe/index.js内容如下:(我们的目的将引入自写的vuex实现vuex基础功能) import Vue from 'vue' import Vuex from 'vuex' // import V

  • vue中的使用token的方法示例

    初始于登录页面 Home.vue <template> <div class="home"> </div> </template> <script> // @ is an alias to /src import HelloWorld from '@/components/HelloWorld.vue' import axios from 'axios'; export default { name: 'home', comp

  • oracle中decode函数的使用方法示例

    decode的几种用法 1:使用decode判断字符串是否一样 DECODE(value,if1,then1,if2,then2,if3,then3,...,else) 含义为 IF 条件=值1 THEN RETURN(value 1) ELSIF 条件=值2 THEN RETURN(value 2) ...... ELSIF 条件=值n THEN RETURN(value 3) ELSE RETURN(default) END IF sql测试 select empno,decode(empn

  • Oracle数据行拆分多行方法示例

    工作和学习中常常会遇到一行要分割成多行数据的情况,在此整理一下做下对比. 单行拆分 如果表数据只有一行,则可以直接在原表上直接使用connect by+正则的方法,比如: select regexp_substr('444.555.666', '[^.]+', 1, level) col from dual connect by level <= regexp_count('444.555.666', '\.') + 1 输出结果: COL ---- 444 555 666 多行拆分 如果数据表

  • swift 3.0中实现字符串截取、比较的方法示例

    前言 字符串处理一直都是程序开发中不可避免的,而字符串截取/替换操作更是频繁.swift3.0 中不能直接使用下标数字进行字符串解决,只能使用String.Index来做位置索引,要想实现截取功能首先得获取到String.Index; 下面话不多说了,来一起看看详细的介绍吧. 实例代码 下面两段代码获取开头可结尾,获取中间部分参数用Range<Index>即可: 获取结尾两个字符子串: let sessionId = "this is a test" let index =

  • 使用jQuery的toggle()方法对HTML标签进行显示、隐藏的方法(示例)

    这是一个示例: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".btn1").cl

随机推荐