Vuex - state , getters , mutations , actions ， modules 的使用
2， 安装完之后会自动生成store文件夹，并在main.js中自动引用
store/index.js
3，在store文件夹下的index.js中定义
4，组件中获取state
console.log('store中的值 : '+this.$store.state.username);
<div>{{name}}</div>
注意要放在computed方法中，可以实时变化
computed: {
name(){
return this.$store.state.username
}
},
4.2,辅助函数mapState，能够帮助我们更便捷的获取state
computed: mapState(["username"]),
5, Getters 获取并操作属性
5.1 getters 在原有状态下派生新的状态
（1）/store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
username:'哈哈',
count:0,
todos: [
{ id: 1, text: '...', done: true },
{ id: 2, text: '...', done: false }
]
},
getters:{
/* 原有基础上派生新的状态 */
username: state => {
return state.username+'..new'
},
count: state=>{
return ++state.count
}
},
mutations: {
},
actions: {
},
modules: {
}
})
（2）*.vue
computed: {
username(){
return this.$store.getters.username
}
},
5.2 getters 在原有状态下过滤派生新的状态
（1）
state: {
username:'哈哈',
count:0,
todos: [
{ id: 1, text: '...', completed: true },
{ id: 2, text: '...', completed: false },
{ id: 3, text: '...', completed: true },
{ id: 4, text: '...', completed: false },
{ id: 5, text: '...', completed: true },
]
},
getters:{
/* 原有基础上派生新的状态 */
username: state => {
return state.username+'..new'
},
count: state=>{
return ++state.count
},
completedTodos: state => {
return state.todos.filter(t=>t.completed) //filter过滤,得到每一个todo,如果todo.completed为真得到，false则被过滤掉
//return state.todos.filter(t=>!t.completed) 过滤掉真的
}
},
（2）
completedTodos(){
return this.$store.getters.completedTodos
}
5.3 getters 返回某个新的状态的长度
getters:{
completedTodos: state => {
return state.todos.filter(t=>!t.completed)
},
/* 返回 completedTodos数据为假的个数*/
completedTodosCount:(state,getters)=>{
return getters.completedTodos.length
}
},
5.4 getters 通过id找到某个值
（1）
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', completed: true },
{ id: 2, text: '...', completed: false },
{ id: 3, text: '...', completed: true },
{ id: 4, text: '...', completed: false },
{ id: 5, text: '...', completed: true },
]
},
getters:{
getTodosById: state => id =>{
return state.todos.find(t=>t.id===id)
}
},
mutations: {
},
actions: {
},
modules: {
}
})
（2）
{{getTodosById(1)}}
computed: {
getTodosById(){
return this.$store.getters.getTodosById
}
},
5.5 getters 简化
<div class="f1">{{getTodosById(1)}}</div>
import { mapState,mapGetters } from 'vuex'
computed: mapGetters(["getTodosById"])，
6，Mutations 修改状态 ( Mutation必须是同步，如果用到异步要使用action)
（1）
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
count:0,
},
getters:{
},
mutations: {
incrementCount(state){
return state.count++
},
decrementCount(state,n){
// n为传递过来的参数 ，
//在大多数情况下，载荷（n）应该是一个对象，这样可以包含多个字段并且记录的 mutation 会更易读
return state.count-=n
}
},
actions: {
},
modules: {
}
})
（2）
<div class="f1">
<button @click="increment">+</button>
{{count}}
<button @click="decrement(2)">-</button>
</div>
methods: {
increment(){
/* 触发mutation中的方法 */
this.$store.commit("incrementCount")
},
decrement(n){
this.$store.commit("decrementCount",n)
}
},
7，Actions 用来操作mutation，异步修改状态 （Action中主要做数据的请求）
Action 类似于 mutation，不同在于：
· Action 提交的是 mutation，而不是直接变更状态。
· Action 可以包含任意异步操作。
（1）操作count
actions: {
incrementCountAsync(context){ //context相当于 this.$store
setTimeout(()=>{
context.commit("incrementCount") //提交到mutation
},2000)
},
decrementCountAsync({commit},payload){ // 结构出 commit ; payload接收参数
setTimeout(()=>{
commit("decrementCount",payload)
},1000)
}
},
————————————————————
<div class="f1">
<button @click="increment">+</button>
{{count}}
<button @click="decrement(2)">-</button>
</div>
methods: {
increment(){
this.$store.dispatch("incrementCountAsync")
},
decrement(n){
this.$store.dispatch("decrementCountAsync",n)
}
},
（2）获取和更新数据
import Vue from 'vue'
import Vuex from 'vuex'
import http from '../http'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
todos: [
{ id: 1, text: '...', completed: true },
{ id: 2, text: '...', completed: false },
{ id: 3, text: '...', completed: true },
{ id: 4, text: '...', completed: false },
{ id: 5, text: '...', completed: true },
]
},
getters:{
},
mutations: {
setTodos:(state,n)=>(state.todos=n) //n为接收的参数 ， todos为state中的todos
},
actions: {
async fetchTodos({commit}){
const res = await http.get('/')
console.log(res);
/* 更新数据 */
commit("setTodos",res.data)
}
},
modules: {
}
})
————————————————————————
<div>{{todos}}</div>
<script>
import { mapState,mapGetters } from 'vuex'
export default {
methods: {
fetchTodos(){
this.$store.dispatch("fetchTodos")
}
},
computed: mapState(["username","count","todos"]),
created() {
this.fetchTodos()
},
}
</script>
8，Module 模块化 （将state中对象抽离, 每一个state包含自己的getters,mutations和actionss，从而实现模块化）
（1）（修改index,js内容）store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import todos from './modules/todos'
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
todos
}
})
（2）（在store目录下创建modules目录，并在modules目录下创建todo,js） store/modules/todos.js
import http from '../../http'
const state = {
todos: [
{ id: 1, text: '...', completed: true },
{ id: 2, text: '...', completed: false },
{ id: 3, text: '...', completed: true },
{ id: 4, text: '...', completed: false },
{ id: 5, text: '...', completed: true },
]
}
const getters = {
completedTodos: state => {
return state.todos.filter(t=>!t.completed) //filter过滤,得到每一个todo,如果todo.completed为真得到，false则被过滤
},
/* 返回 completedTodos数据为假的个数*/
completedTodosCount:(state,getters)=>{
return getters.completedTodos.length
}
}
const mutations = {
setTodos:(state,n)=>(state.todos=n) //n为接收的参数 ， todos为state中的todos
}
const actions = {
async fetchTodos({commit}){
const res = await http.get('/')
console.log(res);
/* 更新数据 */
commit("setTodos",res.data)
}
}
export default {
state,
getters,
mutations,
actions
}
Vuex - state , getters , mutations , actions ， modules 的使用的更多相关文章
- vuex所有核心概念完整解析State Getters Mutations Actions
vuex是解决vue组件和组件件相互通信而存在的,vue理解起来稍微复杂但一旦看懂择即为好用 安装: npm install --save vuex 引入 import Vuex from 'vuex ...
- vuex状态管理,state,getters,mutations,actons的简单使用（一）
之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...
- 组件之间的通讯：vuex状态管理,state,getters,mutations,actons的简单使用（一）
之前的文章中讲过,组件之间的通讯我们可以用$children.$parent.$refs.props.data... 但问题来了,假如项目特别大,组件之间的通讯可能会变得十分复杂... 这个时候了我们 ...
- [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 ...
- VUE - vuex state的使用
1,安装 进入项目目录,执行 vue add vuex 命令 2,会在src的目录下新增store文件夹 3,打开store文件夹下的index.js , 给 state 设定一些数据 impor ...
- Vuex入门实践（中）-多module中的state、mutations、actions和getters
一.前言 上一篇文章<Vuex入门实践(上)>,我们一共实践了vuex的这些内容: 1.在state中定义共享属性,在组件中可使用[$store.state.属性名]访问共享属性 2.在m ...
- Vue Vuex中的严格模式/实例解析/dispatch/commit /state/getters
严格模式 import getters from './getters' import mutations from './mutations' import actions from './acti ...
- weex里Vuex state使用storage持久化
在weex里使用Vuex作为state管理工具,问题来了,如何使得state可以持久化呢?weex官方提供store模块,因此我们可以尝试使用该模块来持久化state. 先看下该模块介绍: stora ...
- Vue学习之--------深入理解Vuex之getters、mapState、mapGetters（2022/9/3）
这一篇博客的内容是在上一篇博客的基础上进行:深入理解Vuex.原理详解.实战应用 @ 目录 1.getters的使用 1.1 概念 1.2 用法 1.3 如何读取数据 2.getters在项目中的实际 ...
随机推荐
- 已知空间两点组成的直线求线上某点的Z值
已知空间两点组成的直线求线上某点的Z值,为什么会有这种看起来比较奇怪的求值需求呢?因为真正三维空间的几何计算是比较麻烦的,很多时候需要投影到二维,再反推到三维空间上去. 复习下空间直线方程:已知空间上 ...
- iOS开发架构学习记录
闲着没事看了一些iOS开发架构的视频,简单的介绍了几个常用的架构设计,现将它记录如下,以后有时间再专门写这方面的内容,大家可以看看,感兴趣的就进一步学习. 一.架构基础 1.架构设计的目的 进一步解耦 ...
- python 的参数总结
一.形参和实参 函数参数的作用是传递数据给函数使用 在使用的过程中,参数有两种形式:形式参数和实际参数 形参: 定义函数的参数 实参: 调用函数时的参数 根据实际参数类型不同,将实际参数传递给形参的方 ...
- P1017进制转化
P1017进制转化 也不知道为啥,这么简单的题困扰了我这么长时间 #include<cstdio> using namespace std; int m; //被除数= 除数*商 + 余数 ...
- Java解析Json字符串--数组或列表
Json示例: [ { "age": 25, "gender": "female", "grades": "三 ...
- Uart学习笔记
分享一个蛮好的链接:https://blog.csdn.net/wordwarwordwar/article/details/73662379 今天在看的资料是S家的DW_apb_uart的官方文档. ...
- 获取Webshell方法总结
一.CMS获取Webshell方法 搜索CMS网站程序名称 eg:phpcms拿webshell.wordpress后台拿webshell 二.非CMS获取Webshell方法 2.1数据库备份获取W ...
- redhat 7.6 安装 inotify-tools 文件监控工具 搭配rsync
1.解压inotify-tools tar -zxvpf inotify-tools-3.14.tar.gz 2.cd 到解压的目录 3../configure 编译,然后失败,提示checking ...
- 设计模式课程 设计模式精讲 7-3 建造者模式源码解析（jdk+guava+spring+mybaties）
1 源码解析 1.1 jdk解析 1.2 guava解析 1.3 spring解析 1.4 mybaties解析 1 源码解析 1.1 jdk解析 String public StringBuilde ...
- 怎样把exe程序注册成系统服务
怎样把exe程序注册成系统服务 最近一段时间我们公司开发一款新的产品,要在服务器上运行一个服务端程序,为了方便我就希望能将这个程序注册成系统服务开机自动启动而不用每次重启系统都要手动启动程序.要实现这 ...