Vuex 是一个专门为 Vue.js 应用所设计的集中式状态管理架构。

官方文档:http://vuex.vuejs.org/zh-cn/  2.0和1.0都能在此找到

每一个 Vuex 应用的核心就是 store(仓库)。"store" 基本上就是一个容器,它包含着你应用里大部分的 状态(即 state). Vuex 和单纯的全局对象有以下两点不同:

1. Vuex 的状态存储是响应式的. 当 Vue 组件从 store 中读取状态的时候, 若 store 中的状态发生变化,那么相应的组件也会相应地高效地得到更新.

2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地分发 状态变更事件(explicitly dispatching mutations)。这样使得我们可以方便地跟踪每一个状态的变化,从而让我们能够实现一些工具帮助我们更好地了解我们的应用。

二话不说,先来个简单的。本文先后步骤与官网不太一样

创建store

创建 Vuex store 的过程相当直截了当 - 只要提供一个初始化的 state 对象,以及一些 mutations:

vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex) //创建一个对象来保存应用启动时的初始状态
const state = {
serviceUrl:"http://192.168.20.166:8989/rest/",//接口地址,请求数据时使用
city:{'city':'成都','id':'2'}//城市对象,本示例中有时候请求数据需要提供站点id
}
// 创建一个对象存储一系列我们接下来要写的 mutation 函数
const mutations = {
// TODO: 放置我们的状态变更函数
}
// 整合初始状态和变更函数,我们就得到了我们所需的 store
// 至此,这个 store 就可以连接到我们的应用中
export default new Vuex.Store({
state,
mutations
})

创建action

创建一个新文件 vuex/actions.js

这地方我们先不写actions,暂时不需要。

获取值

创建一个新文件 vuex/actions.js

//这个getter函数会返回store.js里state中的值

export function getUrl (state) {
return state.serviceUrl//返回serviceUrl的值
} export function getCity (state) {
return state.city//返回city对象
}

现在,我们在组件中加入这个getter 函数
拿vue-router中列表跳转详情的示例来做修改(http://www.cnblogs.com/jyichen/p/5660865.html)

<div class='box'>
<div class='know-list-box'>
<ul>
<li v-for="item in alllist">
<a v-link="{ name: 'getReceiptDetail',params:{id: item.id }}">
<div class='fl know-info'>
<p class='font-normal nomal-height'>{{item.title | limit 30 }}</p>
<p class='co9a9a9a' ><span style='margin-right: 1rem;'>{{item.viewTimes}}K</span><span>{{item.publishTime | timer }}</span></p>
</div>
<div class='fr know-img'>
<img v-bind:src=item.coverImage />
</div>
<div class='clearfix'></div>
</a>
</li>
</ul>
</div>
</div>
<script>
import limit from '../fitter/limit.js'
//导入getter
import { getUrl,getCity } from '../vuex/getter.js'
export default{
vuex: {
getters: {
// 注意在这里需要的是 `getUrl、getCity` 函数本身而不是它的执行结果 'getUrl(),getCity()'
baseUrl:getUrl,
city:getCity
},
},
data(){
return{
toplist:[],
alllist:[],
}
},
route:{
data({to}){
return Promise.all([
this.$http.get(this.baseUrl+'knowledge/list',{'websiteId':this.city.id,'pageSize':5,'pageNo':1,'isTop':1}),
this.$http.get(this.baseUrl+'knowledge/list',{'websiteId':this.city.id,'pageSize':20,'pageNo':1,'isTop':0}),
]).then(function(data){
return{
toplist:data[0].data.knowledgeList,
alllist:data[1].data.knowledgeList
}
},function(error){
//error
})
}
},
ready(){ }
}
</script>

但是这时候请求不到,查看浏览器NetWork会发现地址前缀是自己本机的ip和端口,因为

要在根组件注入store,此时我们修改app.vue(源代码在文章vue-router中:http://www.cnblogs.com/jyichen/p/5660865.html)

app.vue

<template>
<div class='container'>
<router-view class="view"
keep-alive
transition="slide"></router-view>
</router-view>
</div>
</template>
<script>
//在根组件加入 store,让它的子组件和 store 连接
import store from './vuex/store'
export default {
store: store
//也可以这样写:store
}
</script>

此时它应该能正常工作了。

例:使用action

需求:默认count的值为0,点“+”的时候count的值+1,点“-”的时候,count的值-1。如图

图:

修改vuex/store.js,添加一个count的初始值,

import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex) //创建一个对象来保存应用启动时的初始状态
const state = {
serviceUrl:"http://192.168.20.166:8989/rest/",
city:{'city':'成都','id':'2'},
count:0
}
// 创建一个对象存储一系列我们接下来要写的 mutation 函数
const mutations = { }
// 整合初始状态和变更函数,我们就得到了我们所需的 store
// 至此,这个 store 就可以连接到我们的应用中
export default new Vuex.Store({
state,
mutations
})

创建action
action 是一种专门用来被 component 调用的函数。action 函数能够通过分发相应的 mutation 函数,来触发对 store 的更新。action 也可以先从 HTTP 后端或 store 中读取其他数据之后再分发更新事件。
创建一个新文件 vuex/actions.js,然后写入两个函数 incrementCounter和decrementCounter:

// action 会收到 store 作为它的第一个参数
export function incrementCounter(store,val){
store.dispatch('INCREMENT',1)
}
export function decrementCounter(store,val){
store.dispatch('DECREMENT',1)
}

创建mutation

在我们的 vuex/actions.js 文件里我们 dispatch了两个mutation,分别叫INCREMENT和DECREMENT,但是我们还没有写它所对应的具体操作。我们现在就来做这个事。

修改vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex'
//使用vuex
Vue.use(Vuex) //创建一个对象来保存应用启动时的初始状态
const state = {
serviceUrl:"http://121.42.159.121:9080/rest/",
city:{'city':'成都','id':'2'},
count:0
}
// 创建一个对象存储一系列我们接下来要写的 mutation 函数
const mutations = {
// mutation 的第一个参数是当前的 state
// 可以在函数里修改 state
INCREMENT (state,amount){//增量
state.count = state.count + amount
},
DECREMENT (state,val){//减量
state.count = state.count - val
}
}
// 整合初始状态和变更函数,我们就得到了我们所需的 store
// 至此,这个 store 就可以连接到我们的应用中
export default new Vuex.Store({
state,
mutations
})

获取值
修改vuex/actions.js  加入getCount

//这个getter函数会返回store.js里state中的值

export function getUrl (state) {
return state.serviceUrl//返回serviceUrl的值
} export function getCity (state) {
return state.city//返回city对象
} export function getCount(state){
if(state.count <= 0){
return state.count=0
}else{
return state.count
}
}

使用

<template>
<div class='box-content'>
<p>测试vuex</p>
<h3>Count is {{counterValue}}</h3>
<button @click='increment'>Increment +1</button>
<button @click='decrement'>Increment -1</button>
<p>&nbsp;</p>
</div>
</template>
<script>
import { getCount } from '../vuex/getter.js'
import { incrementCounter,decrementCounter } from '../vuex/action.js'
export default{
vuex:{
getters:{
counterValue:getCount
},
actions:{
increment:incrementCounter,
decrement:decrementCounter
}
}
}
</script>

例:从HTTP后端读入数据后分发更新事件

token身份验证

vuex/store.js

import Vue from 'vue'
import Vuex from 'vuex' Vue.use(Vuex) const state = {
token: ' '
} const mutations = {
SETTOKEN(state,val){
state.token = val;
if(window.localStorage){//如果支持localStorage就存到localStorage
var storage = window.localStorage;
storage.setItem('TOKEN',val)
}
}
} export default new Vuex.Store({
state,
mutations
})

vuex/actions.js

export function setTokenAction (store,val) {
store.dispatch('SETTOKEN', val);
}

vuex/getters.js

export function getToken(state){

     if(state.token == ''){
return window.localStorage.getItem('TOKEN');
}else{
return state.token; }
}

页面上使用

<template>
<div>
<input type="text" placeholder='请输入用户名' v-model="username">
<input type="text" placeholder='请输入密码' v-model="userpass">
<a v-on:click="sendLogin()" class='greenBtn'>登陆</a>
</div>
</template>
<script>
import { setTokenAction } from '../vuex/action.js'
export default{
vuex:{
actions:{
setTokenAction:setTokenAction
}
},
data(){
return{
username:'',
userpass:''
}
},
methods:{
sendLogin(){
var that = this ;
that.$http.post('http:192.168.20.166:8989/user/login',{'account':telephones,'pwd':pwd}).then(function(data){
//登录成功
if(data.data.code == '0'){
//data.data.token 服务端返回的token, 存到localStorage
//setTokenAction 触发actions中的setTokenAction dispatch
//setTokenAction dispatch触发mutations中的SETTOKEN
//SETTOKEN修改state中的值
setTokenAction(that.$store,data.data.token);
}
})
}
}
}
</script>
import { getToken } from '../vuex/getter.js'
vuex:{
getters:{
token:getToken
},
actions:{
setTokenAction:setTokenAction
}
}

vuex(1.0版本写法)的更多相关文章

  1. 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vue 2.0 + vuex 2.0 重写这个应用,其中最 ...

  2. 探索 vuex 2.0 以及使用 vuejs 2.0 + vuex 2.0 构建记事本应用23

    前言 首先说明这并不是一个教程贴,而记事本应用是网上早有的案例,对于学习 vuex 非常有帮助.我的目的是探索 vuex 2.0 ,然后使用 vuejs 2.0 + vuex 2.0 重写这个应用,其 ...

  3. 【原】迎接微信winphone 5.0 版本的IE10样式兼容

    微信 Android 5.1 和 iPhone 5.1 已正式发布了,据说本12月底,微信将推出 Winphone 5.0版本,全面支持微信支付,它绑定 IE10 浏览器,那么做微信公众号的 H5 页 ...

  4. CMS .NET 程序框架 从2.0/3.5升级到4.0 版本后 需要调整的地方

    问题一: document.forms1.action 不可使用 需要修改程 document.forms[0] .NET 程序框架 从2.0/3.5升级到4.0 版本后,document.forms ...

  5. iOS开发---百度地图配置流程,2.6.0 版本 支持64位

      1.首先需要在百度地图下载最新SDK:地址: http://developer.baidu.com/map/index.php?title=iossdk/sdkiosdev-download 2. ...

  6. UWP 律师信息 MVVM 2.0版本

    由于1.0版本存在一个很大的BUG,一直也没有找到问题所在,后来,一位在微软的朋友说,他们的测试小妹给出的结果是框架的问题,所以,就直接整体重构了代码,也布局设计上,由跳转页面变为了UWP常见的左侧列 ...

  7. devDependencies和dependencies的版本写法

    devDependencies和dependencies的版本写法 指定版本:比如1.2.2,遵循大版本.次要版本.小版本的格式规定,安装时只安装指定版本. 波浪号(tilde)+指定版本:比如~1. ...

  8. LitepalNewDemo【开源数据库ORM框架-LitePal2.0.0版本的使用】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo使用的是LitePal2.0.0版本,对于旧项目如何升级到2.0.0版本,请阅读<赶快使用LitePal 2.0版本 ...

  9. GlideDemo【Glide3.7.0版本的简单使用以及圆角功能】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 本Demo主要记录Glide3.7.0版本的简单运用和实现圆角方案. 效果图 代码分析 Glide的centerCrop()和fit ...

随机推荐

  1. 最大半连通子图 bzoj 1093

    最大半连通子图 (1.5s 128MB) semi [问题描述] 一个有向图G = (V,E)称为半连通的(Semi-Connected),如果满足:∀ u, v ∈V,满足u->v 或 v - ...

  2. 《连载 | 物联网框架ServerSuperIO教程》- 5.轮询通讯模式开发及注意事项。附:网友制作的类库说明(CHM)

    1.C#跨平台物联网通讯框架ServerSuperIO(SSIO)介绍 <连载 | 物联网框架ServerSuperIO教程>1.4种通讯模式机制. <连载 | 物联网框架Serve ...

  3. GJM : Unity3D 高通Vuforia SDK AR 开发

    一.AR概念: 增强现实(Augmented Reality,简称AR),是在虚拟现实的基础上发展起来的新技术,也被称之为混合现实.是通过计算机系统提供的信息增加用户对现实世界感知的技术,将虚拟的信息 ...

  4. jvm内存溢出分析

    概述 jvm中除了程序计数器,其他的区域都有可能会发生内存溢出 内存溢出是什么? 当程序需要申请内存的时候,由于没有足够的内存,此时就会抛出OutOfMemoryError,这就是内存溢出 内存溢出和 ...

  5. SharePoint 2013 新手注意事项总结[不断更新ing]

    前言 最近自己的QQ群里,经常有新加入的人,带着一些很入门的问题进行提问,这里,自己也总结总结,入门会经常碰到那些问题,希望能够带给入门的人以帮助. 1. SharePoint搭建环境 大家可以参考下 ...

  6. 用block做事件回调来简化代码,提高开发效率

       我们在自定义view的时候,通常要考虑view的封装复用,所以如何把view的事件回调给Controller就是个需要好好考虑的问题, 一般来说,可选的方式主要有target-action和de ...

  7. 初步进行vs单元测试

    首先提一下vs的安装过程,在官网下载免费社区版到本地,根据提示选择安装路径.以及大部分包文件开始安装,等待即可. eclipse的安装比vs多了JDK的下载安装,配置正确的path,以及在eclips ...

  8. WPF 自定义窗口

    在WPF中,经常需要对窗口进行设置,下面讲讲常用的几个设置. 1.无边框窗口 WindowStyle="None" 窗口样式无 AllowsTransparency="T ...

  9. linux hosts文件详+mac主机名被莫名其妙修改

    1.名词解析 主机名: 无论是在局域网还是在INTERNET上,每台主机都有一个IP地址,用来区分当前是那一台机器(其实底层是使用机器的物理地址),也就是说IP地址就是一个主机的门牌号,唯一的标示这一 ...

  10. Struts2入门案例

    struts2最简便的案例   Struts 2是一个MVC框架,以WebWork框架的设计思想为核心,吸收了Struts 1的部分优点.Struts 2拥有更加广阔的前景,自身功能强大,还对其他框架 ...