1.创建 store 结构

2.main.js  引入 vuex

3. App.vue  组件使用 vuex

<template>
<div id="app">
<loading v-show="loading"></loading>
<NavView v-show="headerShow"></NavView>
<router-view></router-view>
<FooterView></FooterView>
</div>
</template> <script>
/**
* 引入 组件
*/
// 头部导航
import NavView from './components/Nav.vue'
// 底部选项卡
import FooterView from './components/Footer.vue' // 引入 vuex 的两个方法
import {mapGetters, mapActions} from 'vuex' export default {
// 计算属性
computed:mapGetters([
// 从getters中获取headerShow的值
'headerShow',
'loading'
]),
watch:{ // 监听,当路由发生变化的时候执行
$route(to,from){
if(to.path == '/user-info'){
/**
* $store来自Store对象
* dispatch 向 actions 发起请求
*/
this.$store.dispatch('hideHeader');
}else{
this.$store.dispatch('showHeader');
}
}
},
components:{
NavView,
FooterView
}
}
</script> <style lang="scss">
@import './assets/css/index.css';
</style>

4.store

(1)index.js  入口文件

/**
* 步骤一
* vuex入口文件
*/
// 引入 vue
import Vue from 'vue'
// 引入 vuex
import Vuex from 'vuex' import actions from './actions'
import mutations from './mutations' Vue.use(Vuex); export default new Vuex.Store({
modules:{
mutations
},
actions
});

(2)type.js  状态(类型)

/**
* 步骤二
* types 状态(类型)
*/

(3)actions.js  管理事件(行为)

/**
* 步骤三
* actions 事件(行为)
*/
// 导出
export default{
showHeader:({commit}) => {
// 提交到 mutations
commit('showHeader');
},
hideHeader:({commit}) => {
// 提交到 mutations
commit('hideHeader');
},
showLoading:({commit}) => {
commit('showLoading');
},
hideLoading:({commit}) => {
commit('hideLoading');
}
}

(4)mutations.js  突变

/**
* 步骤四
* mutations 突变
*/
// 引入 getters
import getters from './getters' // 定义、初始化数据
const state = {
header:true,
loading:false
}; // 定义 mutations
const mutations = {
// 匹配actions通过commit传过来的值,并改变state上的属性的值
showHeader(state){
state.header = true;
},
hideHeader(state){
state.header = false;
},
showLoading(state){
state.loading = true;
},
hideLoading(state){
state.loading = false;
}
} // 导出
export default {
state,
mutations,
getters
}

(5)getters.js  获取数据

/**
* 步骤五
* getters 获取数据
*/
// 导出
export default{
headerShow:(state) => {
return state.header;
},
loading:(state) => {
return state.loading;
}
}

.

vue2.0 仿手机新闻站(三)通过 vuex 进行状态管理的更多相关文章

  1. vue2.0 仿手机新闻站(一)项目开发流程

    vue仿手机新闻站: 1.拿到静态页面,直接用vue边布局,边写 2.假数据 没有用任何UI组件,切图完成 做项目基本流程: 1.规划组件结构 Nav.vue Header.vue Home.vue ...

  2. vue2.0 仿手机新闻站(七)过滤器、动画效果

    1.全局过滤器 (1)normalTime.js  自定义 将 时间戳 转换成 日期格式 过滤器 /** * 将 时间戳 转换成 日期格式 */ export const normalTime = ( ...

  3. vue2.0 仿手机新闻站(六)详情页制作

    1.结构 2.配置详情页路由 router.config.js /** * 配置 路由 */ // 导入组件 import Home from './components/Home.vue' impo ...

  4. vue2.0 仿手机新闻站(五)全局的 loading 组件

    1.组件结构 index.js const LoadingComponent = require('./Loading.vue') const loading = { install: functio ...

  5. vue2.0 仿手机新闻站(四)axios

    1.axios的配置 main.js import Vue from 'vue' import App from './App.vue' // 引入 路由 import VueRouter from ...

  6. vue2.0 仿手机新闻站(二)项目结构搭建 及 路由配置

    1.项目结构 $ vue init webpack-simple news $ npm install vuex vue-router axios style-loader css-loader -D ...

  7. 项目vue2.0仿外卖APP(三)

    项目的结构如下:                   项目资源准备 准备项目的各种图片资源等等 注意:在webpack可以不用css sprite,直接用单张图片,因为它会帮忙打包. 还有SVG图片, ...

  8. Vue2.0仿饿了么webapp单页面应用

    Vue2.0仿饿了么webapp单页面应用 声明: 代码源于 黄轶老师在慕课网上的教学视频,我自己用vue2.0重写了该项目,喜欢的同学可以去支持老师的课程:http://coding.imooc.c ...

  9. 项目vue2.0仿外卖APP(六)

    goods 商品列表页开发 布局编写 除了商品之外还有购物车,还有个详情页,挺复杂的. 两栏布局:左侧固定宽度,右侧自适应,还是用flex. 因为内容可能会超过手机高度,超过就隐藏.左右两侧的内容是可 ...

随机推荐

  1. VS 2013插件

    http://www.spersky.com/post/vsPlugins.html http://vswebessentials.com/download http://developer.51ct ...

  2. Groovy安装

    进入Groovy的官网下载安装SDKMAN() 以下是官网的下载方法(http://www.groovy-lang.org/download.html) This tool makes install ...

  3. 草摆动shader

    Shader "Custom/Grass" { Properties { _MainTex ("Grass Texture", 2D) = "whit ...

  4. [TC_SRM_466]DrawingBlackCrosses

    [TC_SRM_466]DrawingBlackCrosses 试题描述 \(n \times m\)(\(n, m \le 20\))的棋盘 其中至多有 \(8\) 个格子为黑色,其他格子为白色 每 ...

  5. uvalive 6323 状态压缩DP

    思路:dp[i][j][x]表示状态 i 以 j 为结束 得分为 x 的方案数. #include<iostream> #include<cstdio> #include< ...

  6. [暑假集训--数论]poj3518 Prime Gap

    The sequence of n − 1 consecutive composite numbers (positive integers that are not prime and not eq ...

  7. Codevs 1085 数字游戏

    1085 数字游戏 2003年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 丁丁最近沉迷于一个数字游戏之中 ...

  8. 【BZOJ1413】取石子游戏(博弈,区间DP)

    题意:在研究过Nim游戏及各种变种之后,Orez又发现了一种全新的取石子游戏,这个游戏是这样的: 有n堆石子,将这n堆石子摆成一排.游戏由两个人进行,两人轮流操作,每次操作者都可以从最左或最右的一堆中 ...

  9. SQLite-FMDatabase用法

    FMDatabase用法 转载 http://blog.sina.com.cn/s/blog_94d94f1a01015gcr.html 以下是FMDB的一些基本使用,FMDB框架其实只是一层很薄的封 ...

  10. 30+ Excellent Windows Phone 7 Development Tutorials

    原文发布时间为:2012-01-16 -- 来源于本人的百度文章 [由搬家工具导入] Here are 30+ cool Windows Phone Development articles for ...