vue笔记 Vuex
先上文档
自己的理解,就是存一些数据方便调用
安装方法
npm install vuex --save-dev
它必须以插件的方式进行引用
import Vuex from "vuex";
Vue.use(Vuex);
使用方法
index.js 中
const vuex_store=new Vuex.Store({
state:{
user_name:"",
},
mutations:{
showUserName(state)
{
alert("显示一下"+state.user_name)
}
},
})
username.vue 中
userNameChange 方法中添加
this.$store.state.user_name=this.username;
定义一个 vuex
const vuex_store=new Vuex.Store({})
应用级的状态集中放在 store 中。
添加属性
state:{
user_name:"",
},
改变状态的方式是提交mutations，这是个同步的事务。
就是 添加方法
mutations:{
showUserName(state)
{
alert("显示一下"+state.user_name)
}
},
异步逻辑应该封装在action 中。
暂时未用到
在这里我们定义了一个 user_name
给这个属性赋值 this.$store.state.user_name=this.username;
调用 showUserName方法
this.$store.commit("showUserName");
有一些数据我们只需要请求一遍,并把它保存起来,而不是每次进到页面中都刷新
index.js 中添加
state:{
user_name:"",
newsList:[]
},
newlist.vue 中修改
export default{
created(){
if(this.$store.state.newsList.length == 0 ){
this.$http.post("http://域名/newslist.php").then(function (res) {
console.log("请求成功 绑定数据")
this.$store.state.newsList = res.body
},function (r) {
console.log(r)
console.log("请求失败")
})
}
}
}
注意这里接口仅允许了 post 所以使用 post 请求
newslist.php 代码如下
<?php
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST');
header('Access-Control-Allow-Headers:x-requested-with,content-type');
$res = '[ {"newsid":"101","pubtime":"2016-10-02","title":"QFix 探索之路 —— 手Q热补丁轻量级方案 ","desc":"QFix是手Q团队近期推出的一种新的Android热补丁方案，在不影响App运行时性能>（无需插桩去preverify）的前提下有效地规避了","isshow":true}, {"newsid":"102","pubtime":"2016-10-01","title":"大规模排行榜系统实践及挑战 ","desc":" 如何支持业务接近接入，数万乃至几十万级排行榜自动化申请调度？选择什么样的存储引擎？怎样避免各业务资源抢占? ","isshow":false},{"newsid":"103","pubtime":"2016-09-28","title":"BitBucket Cloud新增Git大文件存储Beta支持 ","desc":"Git LFS背后的基本理念是将大型二进制文件存储在并行存储中，>而Git库只包含到那些文件的轻量级引用","isshow":true},{"newsid":"104","pubtime":"2016-09-30","title":"飞天进化，互联网、数据和计算的聚变 ","desc":"阿里巴巴技术委员会主席王坚发布的新书《在线》，被外界视作阿里巴巴技术体系总设计师的王坚出版的第一本著作，吸引了众多参会者的兴趣","isshow":true}]';
header('Content-Type:application/json; charset=utf-8');
exit($res);
允许跨域请求,设置返回为 json 格式, utf-8 编码
返回值 赋给 newsList this.$store.state.newsList = res.body
上方模板循环中 需要求改一下数据源
v-for="news in this.$store.state.newsList"
新增需求 根据 isshow 属性判断 该条数据是否显示
index.js 中添加
getters: {
getNews(state){
return state.newsList.filter(function (news) {
return news.isshow;
})
}
}
newslist.vue 中修改
v-for="news in this.$store.getters.getNews"
新增需求 详情页要求可以实现点赞功能
其实就是 请求一个数据,并刷新到界面上
index.js 中添加
agree 方法,传入对象,及 newsid id 作为数据传给服务器端
context 调用 方法 setAgree 刷新页面中的 agree 值
mutations:{
setAgree(state,agreeNum)
{
state.newsdetail.agree=agreeNum;
}
},
actions:{
agree(context,_newsid)
{
//在这进行ajax请求，获取 点赞后的agree字段属性值
Vue.http.post(
"http://aleen.sololi.net/news.php",
{newsid:_newsid},{emulateJSON:true}
).then(
function(res){
context.commit("setAgree",res.body.agree)
},function(){
}
)
}
},
newsdetail.vue 中 修改
在创建页面的时候 请求 news 的数据 并存入 state 中
点击点赞按钮时 调用上方 agree 方法 ,并将当前 newsid 传过去
this.$store.dispatch 调用 index 中的方法
created()
{
this.$http.get("域名/news.php?newsid="+this.$route.params.newsid)
.then(function(res){
this.$store.state.newsdetail=res.body
console.log(res);
},function(rs){
console.log(rs)
console.log("请求失败")
})
},
methods:{
submitAgree()
{ this.$store.dispatch("agree",this.$store.state.newsdetail.newsid)
}
}
}
将 登录和新闻模块分开
所有模块都写在一个文件中导致这个文件特别大, 不方便管理 所以将其分开来,看一下文档
简单来说就是将index.js const vuex_store=new Vuex.Store({替换成下方的内容 并将
user 相关代码移到 ./../store/modules/UserModules"中
news 相关代码移到 ./../store/modules/NewsModiles
import UserModule from "./../store/modules/UserModules"
import NewsModule from "./../store/modules/NewsModiles"
const vuex_store=new Vuex.Store({
modules: {
users: UserModule,
news: NewsModule
}
})
但是移动完成之后 发现页面报错 或者 不显示
需要将 .vue文件中 类似 this.$store.state.user_name = this.username;的地方替换成为
this.$store.state.users.user_name = this.username;
即添加上对应的modules 名即可
