[Vue] 08 - Vuex
解决不同组件间的数据共享，数据持久化。
https://www.bilibili.com/video/BV1zt411e7fp?p=29
过去是，父子组件通信：[Vue] 04 - Parameter Passing
兄弟组件间的数据共享。
local storage, session storage 在哪里？
核心概念State
Getter
Mutation
Action
Module
state & mutations
一、定义一个 store.js
(1) 增加一个vuex的文件夹；再添加一个js文件：./vuex/store.js
(2) Install vuex。
npm install vuex --save
(3) 一切都是在为实例化 vuex.store 时，为其参数做准备。形式有点类似router。
import Vue from 'vue'import Vuex from 'vuex'
Vue.use(Vuex);
/*1.state在vuex中用于存储数据*/
var state={
count:1
}
/*2.mutations里面放的是方法，方法主要用于改变state里面的数据
*/
var mutations={
incCount(){
++state.count;
}
}
//vuex 实例化 Vuex.store
const store = new Vuex.Store({
state,
mutations
})
export default store;
二、读数据 store.js
Home.vue 从 store.js 读出数据。
Home.vue中，先注册下 store，在27行。然后在第4行使用。
<template><!-- 所有的内容要被根节点包含起来 -->
<div id="home">
我是首页组件 -- {{this.$store.state.count}}
<br>
<button @click="incCount()">增加数量+</button>
</div>
</template>
<script>
//1. 引入store 建议store的名字不要变
import store from '../vuex/store.js';
//2.注册
export default{
data(){
return {
msg:'我是一个home组件',
value1: null,
}
},
store,
methods:{
incCount() {
//改变vuex store里面的数据
this.$store.commit('incCount'); /*触发 mutations 改变 state里面的数据*/
}
}
}
</script>
三、写数据 store.js
Home.vue 直接对 store.js 改变数据。
通过 this.$store.commit('func') 触发了 store 中的 func。
达到的效果就是：两个组件都能同步改变同一个变量(state)，并使用。
getter & action
一、使用 getter
改变state的时候，会自动触发 getters里面的方法。
貌似第二行的方法也能达到第一行的效果。
<!-- 我是首页组件 -- {{this.$store.state.count}} ----{{this.$store.getters.computedCount}} -->我是首页组件 -- {{this.$store.state.count}} ----{{this.$store.state.count*2}}
在store.js中增加了：
/*3、优点类似计算属性 ， 改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)*/var getters= {
computedCount: (state) => {
return state.count*2
}
}
二、使用 action
特点：
(1) 不直接改变状态，只是提交mutations。
(2) 包含任意异步操作。
点击button --> 触发 incCount() --> 继续触发 dispatch制定的action中的方法 ‘incMutationsCount'。
<script>//1. 引入store 建议store的名字不要变
import store from '../vuex/store.js';
//2.注册
export default{
data(){
return {
msg:'我是一个home组件',
value1: null,
}
},
store,
methods:{
incCount(){
//改变vuex store里面的数据
//this.$store.commit('incCount'); /*触发 mutations 改变 state里面的数据*/
this.$store.dispatch('incMutationsCount'); /*触发 actions里面的方法 */
}
}
}
</script>
store.js 中定义了 action。但action不同与mutations，其中可以执行异步。
/* 1.state在vuex中用于存储数据*/var state={
count:1,
list:[]
}
/* 2.mutations里面放的是方法，方法主要用于改变state里面的数据
*/
var mutations={
incCount(){
++state.count;
},
addList(state, data){
state.list = data;
}
}
/* 3、优点类似计算属性 ， 改变state里面的count数据的时候会触发 getters里面的方法 获取新的值 (基本用不到)
*/var getters= {
computedCount: (state) => {
return state.count*2
}
}
/* 4、 基本没有用
Action 类似于 mutation，不同在于：
Action 提交的是 mutation，而不是直接变更状态。
Action 可以包含任意异步操作。
*/
var actions= {
incMutationsCount(context) { /* 因此你可以调用 context.commit 提交一个 mutation*/
context.commit('incCount'); /* 执行 mutations 里面的incCount方法 改变state里面的数据*/
}
}
action和mutations的区别
可见，另一个组件中通过methods中的dispatch()触发 --> actions中的incMutationsCount --> commit('inCount') --> mutations: inCount()
关键在于，在store.js中多了一个actions，做了一个“过度”。
methods:{ incCount(){
//改变vuex store里面的数据
//this.$store.commit('incCount'); /*触发 mutations 改变 state里面的数据*/
this.$store.dispatch('incMutationsCount'); /*触发 actions里面的方法 */
}
}
之前的mutations中的方法 incCount()，是通过 另一个组件中click直接commit去触发，如下所示。
methods:{ incCount() {
//改变vuex store里面的数据
this.$store.commit('incCount'); /*触发 mutations 改变 state里面的数据*/
}
}
store的数据持久化
—— 数据持久化，不同模块间的数据共享。
一、判断数据是否存在
list 保存了固化的数据。
},mounted(){ //判断 store里面有没有数据
var listData=this.$store.state.list;
console.log(listData.length);
if(listData.length > 0){
this.list=listData;
}else{
this.requestData();
}
}
若没有就请求数据。(1) 放在自己这里this.list；(2) 放在store中一份以共享。
methods:{ incCount(){
this.$store.commit('incCount');
},
requestData(){
//请求数据
var api='http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1';
this.$http.get(api).then((response)=>{
console.log(response);
//注意this指向
this.list=response.body.result;
//数据放在store里面
this.$store.commit('addList',response.body.result);
},function(err){
console.log(err);
})
}
}
二、存放在store中
注意第一个默认要写的参数state。
/*2.mutations里面放的是方法，方法主要用于改变state里面的数据*/
var mutations={
incCount(){
++state.count;
},
addList(state, data){
state.list = data;
}
}
End.
以上是 [Vue] 08 - Vuex 的全部内容， 来源链接： utcz.com/z/380027.html
