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. spring aop对service层日志和异常的处理

    1.aop是什么 AOP是Aspect Oriented Programming的缩写,意思是面向切面编程,与OOP(Object Oriented Programming)面向对象编程对等,都是一种 ...

  2. Mysql性能优化一

    下一篇:Mysql性能优化二 mysql的性能优化无法一蹴而就,必须一步一步慢慢来,从各个方面进行优化,最终性能就会有大的提升. Mysql数据库的优化技术 对mysql优化是一个综合性的技术,主要包 ...

  3. 《连载 | 物联网框架ServerSuperIO教程》1.4种通讯模式机制。附小文:招.NET开发,结果他转JAVA了,一切都是为了生活

    参考文章: 1.SuperIO通讯框架介绍,含通信本质 2.C#跨平台物联网通讯框架ServerSuperIO(SSIO) 一.感慨 上大学的时候,没有学过C#,花了5块钱在地坛书市买了一本教程,也就 ...

  4. 禁止backspace键(退格键),但输入文本框时不禁止(兼容IE)

    Ext实现方式: Ext.getDoc().on('keydown',function(e){      if(e.getKey() == 8 && e.getTarget().typ ...

  5. git+coding.net记录篇

    很久没用了,有些配置快忘记了,记录下来,以供以后参考回忆 首先下载好git插件,然后在as上面设置好本地项目地址 设置好git,点击test测试通过 然后把项目添加到git本地库 你会看到你项目里的文 ...

  6. ViewPager之Fragment页面切换

    一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 继上篇文章<ViewPager之引导页>之后,本文主要介绍ViewPa ...

  7. Squirrel: 通用SQL、NoSQL客户端

    安装 配置数据库 配置驱动 配置连接 如果你的工作中,需要使用到多个数据库,又不想在多种客户端之间切换来切换去.那么就需要找一款支持多数据库的客户端工具了.如果你要连接多个关系型数据库,你就可以使用N ...

  8. Java实现上传下载

    一.上传 二.下载 import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import java.io.Fi ...

  9. css之定位

    定位有三种,分别是相对定位 position:relative; .绝对定位 position:absolute; .固定定位 position:fixed; 相对定位 相对定位,就是微调元素位置的, ...

  10. 0033 Java学习笔记-反射-初步1

    先看看通过反射能干嘛 示例:修改对象的private实例变量 package testpack; import java.lang.reflect.Field; public class Test1 ...