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 实例,而应该直接将 state
、mutations
和 actions
暴露出来:
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.js
和getters.js
。如果您使用index.js
来维护state
,getters
,actions
和mutations
,同时具有单个单独的操作文件,那么仍然可以正确识别该文件。
项目结构
vuex 并不限制你的代码结构。但是,它规定了一些需要遵守的规则:
应用层级的状态应该集中到单个 store 对象中。
提交 mutation 是更改状态的唯一方法,并且这个过程是同步的。
异步逻辑都应该封装到 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方法
嗯,就酱~~
Nuxt使用Vuex的更多相关文章
- [Nuxt] Display Vuex Data Differently in Each Page of Nuxt and Vue.js
You often use the same data in different ways across pages. This lesson walks you through setting up ...
- [Nuxt] Use Vuex Actions to Delete Data from APIs in Nuxt and Vue.js
You'll begin to notice as you build out your actions in Vuex, many of them will look quite similar. ...
- [Nuxt] Load Data from APIs with Nuxt and Vuex
In a server-rendered application, if you attempt to load data before the page renders and the data f ...
- [Nuxt] Update Vuex State with Mutations and MapMutations in Vue.js
You commit changes to state in Vuex using defined mutations. You can easily access these state mutat ...
- 踩坑记录-nuxt引入vuex报错store/index.js should export a method that returns a Vuex instance.
错误 store/index.js代码如下: import Vue from 'vue'; import Vuex from 'vuex'; import city from './moudle/ci ...
- Nuxt.js项目实战
感悟 经过几个周六周日的尝试,终于解决了服务端渲染中的常见问题,当SEO不在是问题的时候,或许才是我们搞前端的真正的春天,其中也遇到了一些小坑,Nuxt.js官方还是很给力的,提issue后很积极的给 ...
- Nuxt.js使用详解
首先来讲一下服务端渲染 直白的说就是在服务端拿数据进行解析渲染,直接生成html片段返回给前端.具体用法也有很多种比如: 传统的服务端模板引擎渲染整个页面 服务渲染生成htmll代码块, 前端 AJA ...
- vuex分模块3
nuxt 踩坑之 -- Vuex状态树的模块方式使用 原创 2017年12月20日 11:24:14 标签: vue / nuxt / vuex / 模块化 / 状态管理 874 初次看到这个模块方式 ...
- 🏃♀️点亮你的Vue技术栈,万字Nuxt.js实践笔记来了~
前言 作为一位 Vuer(vue开发者),如果还不会这个框架,那么你的 Vue 技术栈还没被点亮. Nuxt.js 是什么 Nuxt.js 官方介绍: Nuxt.js 是一个基于 Vue.js 的通用 ...
随机推荐
- 修改 hostname
1.修改hostname hostname是一个kernel变量,可以通过hostname命令来查看本机的hostname.也可以直接cat /proc/sys/kernel/hostname查看. ...
- 02-4设置第一启动项--U盘装系统中bios怎么设置USB启动
整个U盘启动里最关键的一步就是设置U盘启动了,本教程内只是以特定型号的电脑为例进行演示,鉴于各种电脑不同BIOS设置U盘启动各有差异,所以如果下面的演示不能适用于你的电脑,建议去百度或者谷歌搜索一下你 ...
- HDU 3861 The King’s Problem(强连通+二分图最小路径覆盖)
HDU 3861 The King's Problem 题目链接 题意:给定一个有向图,求最少划分成几个部分满足以下条件 互相可达的点必须分到一个集合 一个对点(u, v)必须至少有u可达v或者v可达 ...
- Centos 删除用户
# 查看用户 tail /etc/passwd # 删除用户 userdel -rf ftpuser1
- Timer和ScheduledExecutorService区别
Timer特点: 1.一个Timer只占用一个线程 timer有多个timerTask的情况,如果一个timerTask有执行时间过长,其它的timerTask就会被耽误 2.如果TimerTas ...
- 181. Flip Bits【easy】
181. Flip Bits[easy] Determine the number of bits required to flip if you want to convert integer n ...
- Goole Python 风格指南 中文版
http://zh-google-styleguide.readthedocs.io/en/latest/google-python-styleguide/
- [精]Oracle 11G数据库VMware虚拟机下载
虚拟机文件下载地址: http://pan.baidu.com/s/1pJL5Tub 备份一个防止失效 https://pan.baidu.com/s/1nvbZQad Readme文件: 数据库版本 ...
- App上架注意事项(转)
上传不出现构建版本 现在苹果要求先上传版本,然后在提交审核,但是现在经常上传完应用后,不出现构建版本,等待很久很久,也不出现,那么怎么解决,我告诉你~~尼玛的苹果是自己数据丢包了,结果就造成你不出现构 ...
- srping mvc学习
HOME 控制器 package ghy.webapp.myapp; import java.text.DateFormat; import java.util.Date; import java.u ...