用vuex的好处
1、解决了不同组件的数据共享问题
2、组件里面的数据持久化
环境及项目搭建
下载node.js，安装之后在cmd里输入命令行
npm install webpack -g
安装vue-cli,输入命令行
npm install webpack -g vue-cli
使用命令 vue init webpack vue-demo 搭建vue项目, vue-demo”是你的项目名称。
安装vuex
使用命令：npm install vuex --save
vuex的使用
1、在src的目录下新建一个vuex的文件夹
2、在vuex下面新建一个store.js
直接把store.js里的代码贴上，里面有注释
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
//创建存储数据的仓库state,集中管理数据，相当于data，用语存储数据
const state={
msg:"这是测试的",
count:1,
list:[]
}
//actions中的方法,这里面的方法都是异步操作
//页面上调用这个里面的方法，其实还是调用的下面mutations里的方法
//页面上调用这个里面的方法使用this.$store.dispatch()
const actions={
setValue(context,res) {
// console.log(res);
context.commit('setData',res);
}
}
//创建mutations，主要放的是方法，目的是能最终改变仓库中的数据，这里是同步操作
//页面上调用这里的方法使用this.$store.commit()
const mutations={
//如果要传值必须加一个state
setData(state,result) {
state.msg=result;
},
addcount(){
++state.count
},
//给list赋值
setLlist(state,result){
console.log("hhh"+result.length);
state.list = state.list.concat(result);
}
}
//有点类似于计算属性 改变state里的count的值的时候会触发这里面的方法
const getters={
computedcount:(state)=>{
return state.count*2;
}
}
//暴露出去，实例化
export default new Vuex.Store({
state,
actions,
mutations,
getters
})
