Vuex的作用
解决多组件之间同一状态的数据共享;
解决数据持久化问题。
安装
cnpm install vuex --save
定义
// src下新建vuex目录,再在vuex目录下,新建store.js
// store.js:
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// 1、存储数据,主要用于数据共享和持久化的存储
var state = {
count: 1,
list: []
}
// 2、修改state数据的地方
var mutations = {
incCount() {
++state.count;
}
}
// 3、当state改变的时候,通过getters中的方法返回重新计算后的state的值,实际上并没有什么用处
var getters = {
computedCount: (state) => {
return state * 2
}
}
// 4、调用mutations的地方,起到间接修改state的作用,可以进行异步请求的地方,跟getters一样,并没有什么作用
var actions = {
incMutationsCount(context) {
context.commit('incCount');
}
}
var store = new Vuex({
state,
mutations,
getters,
actions
})
export default store
使用
// Home.vue:
<template>
<div id="home">
{{msg}}--{{this.$store.state.count}}---{{this.$store.getters.computedCount}}
<br>
<button @click="incCount()">增加</button>
<br>
<ul>
<li v-for="(item, key) in list" :key="key">
{{item}}
</li>
</ul>
</div>
</template>
<script>
import store from '../vuex/store.js'
export default {
name: 'app',
data () {
return {
msg: '我是首页',
list: []
}
},
store,
method: {
incCount() {
this.$store.commit('incCount')
},
requestData() {
// 这里假设请求的api地址返回值中,data是一个数组
let api = "";
// 这里用的是vue-resource请求数据
this.$http.get(api).then(response => {
console.log(response)
this.list = response.data
this.$store.state.list = response.data
}, err => {
console.log(err)
})
}
},
mounted() {
var stateList = this.$store.state.list
if (stateList.length > 0) {
this.list = stateList
} else {
this.requestData()
}
}
}
</script>