Vue--- 使用vuex使用流程 1.0
Vuex
1.安装vuex
npm install -save vuex
2. 引入 创建store文件夹目录
创建 vuex 指挥公共目录 store【'state','actions','mutations','getters','index'】
3.store -》index.js (所有的store下的都引入进去进行声明 )
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
import getters from './getters' Vue.use(Vuex) /* eslint-disable new-cap */ export default new Vuex.Store({
state,
mutations,
actions,
getters
})
4.在main.js
/*
入口JS
*/
import Vue from 'vue'
import App from './components/App'
import store from './store'
import './base.css'
/* eslint-disable no-new */ new Vue({
el: '#app',
// components:{App},
// template:'<App/>'
render: h => h(App),
store
})
5.在组件儿中使用
1.this.$store.dispath('addTodo');
2.import {mapActions} from 'vuex'
...mapActions('addTodo')
6.
state 对应的data存放数据对象 state.todos
mutations 操作变更state数据
[CLEAR_ALL_COMPLETED](state){
state.todos = state.todos.filter(todo => (!todo.complete))
}
getters 计算state 计算属性的方法都是i在这里
totalCount(state){ return state.todos.length }
actions 触发mutations中的方法 this.$store.dispatch('removeTodo')
/* 组件写 this.$store.dispath('') 调用这里的方法
接受组件通知触发 mutation调用间接状态的方法的对象
*/ import {ADD_TODO, DELETE_TODO, SELECT_ALL_TODOS, CLEAR_ALL_COMPLETED,RECEIVE_TODOS} from './mutation-types'
import storageUtil from '../utils/storageUtils.js'
export default {
addTodo ({commit}, todo) {
commit(ADD_TODO, {todo})
},
deleteTodo({commit},index){
commit(DELETE_TODO,{index})
},
selectAllTodos ({commit}, check) {
commit(SELECT_ALL_TODOS, {check})
},
clearALLCompleted({commit}){
commit(CLEAR_ALL_COMPLETED)
},
reqTodos({commit},todos){
setTimeout(()=>{
// 读取数据
const todos = storageUtil.readTodos()
// 提交数据
commit(RECEIVE_TODOS,todos)
},1000)
}
}
Vue--- 使用vuex使用流程 1.0的更多相关文章
- Vue 2.0 + Vue Router + Vuex
用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...
- 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面
一.项目简介 基于Vue + Vuex + Vue-router + Webpack 2.0打造微信界面,实现了微信聊天.搜索.点赞.通讯录(快速导航).个人中心.模拟对话.朋友圈.设置等功能. 二. ...
- 基于vue2.0打造移动商城页面实践 vue实现商城购物车功能 基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践 地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能 地址:http://www.jb51.net/art ...
- vue:vuex详解
一.什么是Vuex? https://vuex.vuejs.org/zh-cn 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相 ...
- vue 之 vuex
Vuex 什么是Vuex? 官方说法:Vuex 是一个专为 Vue.js应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. 个人 ...
- vue项目--vuex状态管理器
本文取之官网和其他文章结合自己的理解用简单化的语言表达.用于自己的笔记记录,也希望能帮到其他小伙伴理解,学习更多的前端知识. Vuex 是什么? Vuex 是一个专为 Vue.js 应用程序开发的状态 ...
- Vue之Vuex
一.什么是vuex Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.简单来说就是一个数据统一 ...
- requirejs、vue、vuex、vue-route的结合使用,您认为可行吗?
在五一节之前和一网友讨论前端技术时,对方提到vue.vue-route如果配合requirejs应用.当时的我没有想得很明白,也没能这位网友一个准确的回复,但我许诺于他五一研究后给他一个回复.本是一天 ...
- Vue中Vuex的详解与使用(简洁易懂的入门小实例)
怎么安装 Vuex 我就不介绍了,官网上有 就是 npm install xxx 之类的.(其实就是懒~~~哈哈) 那么现在就开始正文部分了 众所周知 Vuex 是什么呢?是用来干嘛的呢? Vuex ...
随机推荐
- git获取别人远程dev分支上的代码
我们在使用 git clone xxx.git 下载代码的时候,获取到的只是 master上的代码 假入有个 dev 分支我们想获取上面的代码怎么办! #下载dev分支上的代码并切换到dev分支 g ...
- hiveQL随笔
hiveQL中union all直接用于select 子句
- phpmyadmin杂记
看着坑爹的教程..我老是报错我也很无奈啊 以下几项必改 $cfg['blowfish_secret'] = ' ';//这里引号内是空格,实际上可以是任意内容, $cfg['Servers'][$i] ...
- 对象大小对比之Comparable与Comparator
一 概述 1.Comparable与Comparator使用背景 数值型数据(byte int short long float double)天生可对比大小,可排序,String实现了Compara ...
- 【起航计划 036】2015 起航计划 Android APIDemo的魔鬼步伐 35 App->Service->Messenger Service Messenger实现进程间通信
前面LocalService 主要是提供同一Application中组件来使用,如果希望支持不同应用或进程使用Service.可以通过Messenger.使用Messgener可以用来支持进程间通信而 ...
- JavaScript的数据类型与变量
JavaScript数据类型 1.原始数据类型: 数值型,如十进制数.十六进制数.八进制数和特殊值(Infinity.NaN),注意:NaN不能和自身比较 字符串型,如定界符.转义符: 布尔类型. 2 ...
- spark包
spark-assembly-1.5.2-hadoop2.6.0.jar http://blog.csdn.net/ronaldo4511/article/details/53035494 http: ...
- t d x 示例z
using System; using System.Collections.Generic; using System.Linq; using System.Runtime.InteropServi ...
- 用ant打包apkbuilder找不到了的解决办法
apkbuilder的情况下生成apk文件,其实apkbuilder是一个批处理文件,打开里面就能发现,其实他内部执行的是sdklib.jar里面的一个class,所以就知道怎么做了,很简单,我们自己 ...
- 每日linux命令之kill
1.命令格式: kill[参数][进程号] 2.命令功能: 发送指定的信号到相应进程.不指定型号将发送SIGTERM(15)终止指定进程.如果任无法终止该程序可用“-KILL” 参数,其发送的信号为S ...