一,简介
https://vuex.vuejs.org/zh/
vuex是vue的数据框架
state:公用数据都存在state中
actions:异步处理,或批量的同步操作
mutations:改变state中的值(同步)
注意:有时可以略过action,组件直接调用mutations,修改state中的数据
二,安装和引入
- npm install vuex –save
- 新建store文件夹,新建index.js文件,
Vue.use(Vuex)
是Vuex作为插件引入的写法,公用数据state中的city
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
city: '上海'
}
})
- 在主js(main.js)中引入index.js,并在根组件中引入store
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
三,使用state中公用数据
此时,可以在所有组件中调用公用数据了,因为在根组件中已经引入store
this.$store.state.city
<router-link to='/city'>
<div class="header-right">
{{this.$store.state.city}}
<span class="iconfont arrow-icon"></span>
</div>
</router-link>
四,使用actions和mutations改变数据
改变当前城市的数据(通过点击热门城市改变)
在热门城市绑定一个点击事件,在点击事件中,派发事件action
methods: {
handleCityClick (city) {
// 派发事件action
this.$store.dispatch('changeCity', city)
}
}
在index.js中接收changeCity的action事件
再在action触发commit方法
再走到mutations中改变数据
export default new Vuex.Store({
state: {
city: '上海'
},
actions: {
changeCity (ctx, city) {
ctx.commit('changeCity', city)
}
},
mutations: {
changeCity (state, city) {
state.city = city
}
}
})
五,简化
当没有异步操作时,可以去除action的过程,直接在点击事件中commit
methods: {
handleCityClick (city) {
this.$store.commit('changeCity', city)
}
},
在mutations中改变数据
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
city: '上海'
},
mutations: {
changeCity (state, city) {
state.city = city
}
}
})
六,拆分index.js
就是细化成多个js文件,再引入进来
加入了本地存储localStorage,要加try catch,因为浏览器有些设置可能导致localStorage不可用而报错
state.js
let defaultCity = '上海'
try {
if (localStorage.city) {
defaultCity = localStorage.city
}
} catch (e) {}
export default {
city: defaultCity
}
mutations.js
export default {
changeCity (state, city) {
state.city = city
try {
localStorage.city = city
} catch (e) {}
}
}
index.js
// 使用vuex实现数据共享
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
// Vuex作为插件引入的写法
Vue.use(Vuex)
export default new Vuex.Store({
// 公用数据
state,
mutations
})
七,vuex的映射
vuex中的方法和数据可以映射到vue组件中,省去从vuex中调用
1,mapState
在计算属性computed
中引入
<script>
import { mapState } from 'vuex'
export default{
name: 'HomeHeader',
computed: {
...mapState(['city'])
}
}
</script>
调用可由this.$store.state.city
变成 this.city
也可以引入为对象
...mapState({
currentCity: 'city'
})
调用可由this.$store.state.city
变成 this.currentCity
2,mapMutations
在方法methods
中引入
import { mapState, mapMutations } from 'vuex'
methods: {
handleCityClick (city) {
// this.$store.commit('changeCity', city)
this.changeCity(city)
this.$router.push('/')
},
...mapMutations(['changeCity'])
},
this.changeCity(city)
可以取代 this.$store.commit('changeCity', city)
了
八,Getter
相当于组件的计算属性
在index.js中加入一个简单的计算
export default new Vuex.Store({
// 公用数据
state,
mutations,
// 相当于组件的计算属性
getters: {
doubleCity (state) {
return state.city + ' ' + state.city
}
}
})
使用(和state一样)
<script>
import { mapState, mapGetters } from 'vuex'
export default{
name: 'HomeHeader',
computed: {
...mapState(['city']),
...mapGetters(['doubleCity'])
}
}
</script>