官方解释：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
个人理解：组件间传参使用，不用考虑父子组件关系或者非父子组件关系
vuex官网：https://vuex.vuejs.org/zh/ 点击打开链接
安装：cnpm install vuex --save
注册vuex
新建存放vuex的文件store/index.js
引用并声明vuex
import
Vue
from
'vue'
import
Vuex
from
"vuex"
Vue.
use(
Vuex);
用法一：纯本地数据传输（非异步请求数据）
定义vuex内容
const
store =
new
Vuex.
Store({
//定义
state: {
title:
" ",
//提前定义数据名称
comingsoon:
"",
},
mutations: {
//方法名称和传参时定义的名称一致
kerwinchangetitle(
state,
payload) {
//第一个参数是要存放的位置，第二个参数是传来的数据
state.
title =
payload
}
},
})
export
default
store;
//导出
引用store
import
Vuex
from
"vuex"
import
store
from
"./store"
new
Vue({
el:
'#app',
router,
store,
axios,
components: {
App },
template:
'<App/>',
render
:
h
=>
h(
App)
})
传送数据
点击事件跳转组件，跳转之前将数据传送到vuex内储存
setStore(
name) {
this.
$store.
commit(
"kerwinchangetitle",
name);
router.
push(
"/");
}
kerwinchagetitle：定义传送方法名称
name：将要储存在vuex内的数据
接收数据
mounted() {
this.
title =
this.
$store.
state ?
this.
$store.
state.
title : [];
}
this.$store.state.title：vuex内存放的数据名称，将vuex内的数据请求出并赋值给该组件的this.title
用法二：异步请求数据
import axios from "axios"; //引入axios
state: {
comingsoon:
""
},
actions: {
comingsoonaction
:
function (
store,
payload) {
//异步请求
axios.
get(
"").
then(
res
=> {
console.
log(
res.
data.
data)
//请求回来的数据
store.
commit(
'kerwincomingsoon',
res.
data);
//传给metations中修改
})
}
},
metations: {
kerwincomingsoon
:
function (
state,
payload) {
state.
comingsoon =
payload
//修改参数 赋值给comingsoon。
}
}
metations会监控每一笔数据的修改记录，必须交给metations中修改，否则会报错
在其他组件获取数据的操作是相同的
store最终是被渲染成一段js对象 刷新后就没有了 内存就被释放了
1.应用层级的状态应该集中到单个store对象中。
2.提交mutation是更改状态的唯一方法，并且这个过程是同步的
3.异步逻辑都应该封装到action里面
官网推荐工具 谷歌浏览器插件 devtools
<----------------------------------------------------学习交流,---------------------------------------------------->