初识Vuex
vuex的概念
vuex是一个专为 Vue.js 应用程序开发的状态管理模式， 采用集中式存储管理应用的所有组件的状态，解决多组件数据通信。(简单来说就是管理数据的,相当于一个仓库,里面存放着各种需要共享的数据,所有组件都可以拿到里面的数据)
要点:
vue官方搭配,专属,有专门的调试工具
数据变化是可预测的(响应式)
集中式管理数据状态方案
Vuex的使用
安装VueX
1.安装
2.实例化store
新建store文件夹,在该文件夹下建index.js文件
1
2
3
4
5
6
7
8
9
10
11
| import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
count: 0
}
})
export default store
|
3.在vue实例中,注入store
1
2
3
4
5
6
7
8
|
import store from './store'
new Vue({
store
})
|
在组件中使用store
方式一
在任意组件中，通过this.$store.state.属性名 来读取公共数据。
在模块中,则可以直接省略this而直接写成：{{$store.state.属性名}}
方式二
基于 Vuex 提供的 mapState 辅助函数，可以方便的把 Store 中指定的数据，映射为当前组件的计算属性
map辅助函数：
1
2
3
4
| computed: {
...mapState(['xxx']),
...mapState({'新名字': 'xxx'})
}
|
另一种映射方式：
1
2
3
4
5
| computed: {
...mapState({
wallet: state => state.user.wallets[state.user.selectedWallet]
})
},
|
Vuex实现刷新保持数据
在app.vue里直接加上这段代码，加上之后怎么刷新数据都不会丢失了
1
2
3
4
5
6
7
8
| created() {
if (sessionStorage.getItem('store')) {
this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
}
window.addEventListener('beforeunload', () => {
sessionStorage.setItem('store', JSON.stringify(this.$store.state));
});
}
|
Vue中监控Vuex数据变化
场景如下图所示
切换主页面中的组织（即：改变组织id orgid),需要刷新组件中的列表
第一种
通过改变router-view中的key来达到刷新组件的目的（野路子，推荐第三种）
当改变state中的值时，改变router-view中的key,这个key为时间戳
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| <router-view :key="timeValue"/>
<script>
export default {
name: 'mainMenu',
data() {
return {
orgid:'',
timeValue:''
}
},
computed: {
},
components: {
},
created() {
},
mounted() {
},
methods: {
changeOr(){
this.orgid = "23"
this.$store.commit('ogrid',this.orgid);
var timeNow = new Date().getTime();
this.timeValue = timeNow
}
},
}
</script>
|
第二种
用watch(两种方法不可共存，用第一种时，watch失效)
在子组件中，用watch监听
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| <script>
export default {
name: 'sub',
data() {
return {
}
},
computed: {
},
watch:{
'$store.state.orgid'(){
alert('改变')
this.initTable()
}
},
components: {
},
created() {
},
mounted() {
},
methods: {
initTable(){}
},
}
</script>
|
第三种
vue全局更新以及孙组件调用祖组件（利用provide和inject）
参考文章
vue全局更新以及孙组件调用祖组件（利用provide和inject）_有蝉的博客-CSDN博客_vue孙组件调用祖组件方法
Vuex实战
