vuex 操作姿势
Vuex 应用的核心就是 store,它包含着你的应用中大部分的状态 (state)
你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。
首先举例一个最近看的使用vuex 存取数据状态的 套路写法
建立一个stroe 文件夹中建立一个index.js 初始化vuex 。引入state.js 定义全局定义的数据。mutations.js 是定义改变state值的操作函数,引入getters.js 是获取值前可对值进行操作,类似计算属性。actions.js 一些多个改变state 值的提交函数,或者函数里有异操作createLogger 是vuex 提供的调试工具,在调试的时候可以方便的从控制台看到当前state的改变状态,另建立一个mutation-type.js 来定义一些常亮,来专门定义mutations 的函数名称,方便整理
index.js
import Vue from "vue"
import Vuex from "vuex"
import * as actions from './actions.js'
import * as getters from './getters.js'
import state from './state.js'
import mutations from './mutations.js'
import createLogger from 'vuex/dist/logger' Vue.use(Vuex);
const debug = process.env.NODE_ENV !== 'production' export default new Vuex.Store({
actions,
getters,
state,
mutations,
strict:debug,
plugins:debug ? [createLogger()]:[]
})
state.js 里面设置初始值,就是想全局设置的数据
const state = {
singer:{},
playing:false,
fullScreen:false,
playList:[],
sequenceList:[],
mode:1,
currentIndex:-1,
disc:{},
topList:{},
searchHistory:loadSearch(), //从缓存中取初始值
skinColor:localStorage.skinColor || '#B72712',
}
export default state
getters.js
export const singer = state => state.singer export const playing = state => state.playing;
export const fullScreen = state => state.fullScreen;
export const playList = state => state.playList;
export const sequenceList = state => state.sequenceList;
export const mode = state => state.mode;
export const currentIndex = state => state.currentIndex;
export const currentSong = (state) => {
return state.playList[state.currentIndex] || {}
}
mutation-type.js
export const SET_SINGER = 'SET_SINGER' export const SET_PLAYING_STATE = 'SET_PLAYING_STATE' ...
mutations.js
import * as types from './mutation-types.js' const mutations = {
[types.SET_SINGER](state, singer) {
state.singer = singer
},
[types.SET_PLAYING_STATE](state, flag) {
state.playing = flag
},
[types.SET_FULL_SCREEN](state, flag) {
state.fullScreen = flag
},
[types.SET_PLAYLIST](state, list) {
state.playList = list
}
} export default mutations
actions.js
import * as types from './mutation-types.js' export const selectPlay = function({commit,state},{list,index}){
commit(types.SET_SEQUENCE_LIST, list)
commit(types.SET_CURRENT_INDEX, index)
commit(types.SET_FULL_SCREEN, true)
commit(types.SET_PLAYING_STATE, true)
}
基本套路每增加一个数据状态 就相对应的修改这四个文件
在组件中存储获取vuex 中的数据,用vuex 提供的语法糖语法,获取用mapGetters,提交修改数据用 mapMutations 或者 mapActions
mapGetters 里参数是数组,值对应getters.js 定义的函数名,mapMutations 里参数是对象,设置一个代理方法名方便在组件中使用,mapActions 参数是actions.js 中定义的函数名
import {mapGetters,mapMutations,mapActions} from 'vuex'; computed:{
...mapGetters([
'fullScreen',
'playList',
'currentSong',
]) }, methods:{
...mapMutations({
setFullScreen:"SET_FULL_SCREEN",
setPlayingState:'SET_PLAYING_STATE',
}),
...mapActions([
'saveFavoriteList',
'deleteFavoriteList'
]) },
非语法糖写法
this.$store.state.musicData; //获取state 值 this.$store.commit('changeLinkBorderIndex', 2); //修改mutation this.$store.dispatch('getData'); // 派发修改actions 方法
* 安装 vue-devtools 可以方便看到vuex 状态
以上均是个人理解,务必请自行看官方文档理解
vuex 操作姿势的更多相关文章
- vuex操作
import Vuex from 'vuex' //引入Vue.use(Vuex) //加载到Vue中//创建一个数据存储对象var store=new Vuex.Store({ //state可以当 ...
- 还看不懂同事的代码?超强的 Stream 流操作姿势还不学习一下
Java 8 新特性系列文章索引. Jdk14都要出了,还不能使用 Optional优雅的处理空指针? Jdk14 都要出了,Jdk8 的时间处理姿势还不了解一下? 还看不懂同事的代码?Lambda ...
- Vuex操作步骤
概念流程图: 案例: (1)src/store/index.js导出仓库 (2)在入口文件引入仓库并派发到每个组件,在入口文件main.js引入,挂载到根组件上,方便以后使用this.$store调用 ...
- 萌新 学习 vuex
vuex官网文档 https://vuex.vuejs.org/zh-cn/ 注: Mutation事件使用commit触发, Actions事件使用dispatch触发 安装 npm install ...
- vuex数据管理-数据模块化
对于vue这类mvvm框架来说,其核心就是组件与数据,因此做好相应的数据管理极为重要.这里分享下vuex数据模块化管理的方法,有利于搭建便于维护.协作的vue项目. vuex管理基本方法和使用 模块化 ...
- Golang的文件处理方式-常见的读写姿势
Golang的文件处理方式-常见的读写姿势 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 在 Golang 语言中,文件使用指向 os.File 类型的指针来表示的,也叫做文件句柄 ...
- SpringBoot系列教程web篇Listener四种注册姿势
java web三要素Filter, Servlet前面分别进行了介绍,接下来我们看一下Listener的相关知识点,本篇博文主要内容为SpringBoot环境下,如何自定义Listener并注册到s ...
- SpringBoot系列教程web篇Servlet 注册的四种姿势
原文: 191122-SpringBoot系列教程web篇Servlet 注册的四种姿势 前面介绍了 java web 三要素中 filter 的使用指南与常见的易错事项,接下来我们来看一下 Serv ...
- SpringBoot系列教程JPA之query使用姿势详解之基础篇
前面的几篇文章分别介绍了CURD中的增删改,接下来进入最最常见的查询篇,看一下使用jpa进行db的记录查询时,可以怎么玩 本篇将介绍一些基础的查询使用姿势,主要包括根据字段查询,and/or/in/l ...
随机推荐
- array_diff使用注意
$lost_ids = array_diff($all_ids,$old_ids); //array_diff,$old_ids不可以为null否则返回为null;array_diff起不到效果~~~
- Nginx修改access.log日志时间格式
一.修改原因 因为要获取nginx访问信息,作为开发的数据使用,但是nginx的access.log文件中的默认的时间格式是这样的: [02/Nov/2017:20:48:25 +0800] 而要求的 ...
- Anniversary party(树形dp入门)
Anniversary party Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- Linux type命令的用法
一般情况下,type命令被用于判断另外一个命令是否是内置命令,但是它实际上有更多的用法. 1.判断一个名字当前是否是alias.keyword.function.builtin.file或者什么都不是 ...
- MongoDB - MongoDB CRUD Operations, Insert Documents
MongoDB provides the following methods for inserting documents into a collection: db.collection.inse ...
- git使用(1)----推送代码到远程
git使用(1) 首先要明白git上有三个区域 1.工作区 2.暂存区 3.历史记录区 步骤: 1.git init 2.配置环境(如果配置一次了以后就不用再继续配置) git config - ...
- (2.1)windows下Nutch1.7的安装
酒店评论情感分析系统(二)——Nutch安装 一.需求部分 Nutch是Java开发的所以需要下载Java JDK. 下载地址http://java.sun.com/javase/downloads/ ...
- DOM使用
DOM树模型 document |-html |-head |-.... |-body |-..... 要解析页面的前提是要拿到一个对象,然后利用树之间前后的关系进行对象的遍历和操作. 在DHTML的 ...
- 【CodeForces】698 C. LRU
[题目]C. LRU [题意]给定空间为k的背包和n个物品,每次每个物品有pi的概率加入(Σpi=1),加入时若发现背包中已有该物品则不改变,若背包满k个物品后再加入新物品则弹出最早加入的物品,求加入 ...
- flex图片布局
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>f ...