版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yhflyl/article/details/86706802
VUEX的使用
安装vuex
npm install vuex --save
创建vue的store文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
city: '北京'
}
})
在main.js中添加
// ----------- 引入 -------------------//
import store from './store'
// ------------ 使用 ----------------------//
new Vue({
el: '#app',
router,
store: store,
components: { App },
template: '<App/>'
})
在模板中使用
<div class="area">
<div class="title border-topbottom">当前城市</div>
<div class="button-list">
<div class="button-wrapper">
<div class="button">{{this.$store.state.city}}</div>
</div>
</div>
</div>
修改vuex中数据
- 添加点击事件
<div class="area">
<div class="title border-topbottom">热门城市</div>
<div class="button-list">
<div
class="button-wrapper"
v-for="item of hot"
:key="item.id"
@click="handleCityClick(item.name)"
>
<div class="button">{{item.name}}</div>
</div>
</div>
</div>
- 通过dispatch发送action和数据
methods: {
handleCityClick (city) {
this.$store.dispatch('changeCity', city)
}
},
- 在store中创建action和mutations
export default new Vuex.Store({
state: {
city: '北京'
},
actions: {
changeCity (ctx, city) {
ctx.commit('changeCity', city)
}
},
mutations: {
changeCity (state, city) {
state.city = city
}
}
})
当点击事件出发的时候,可以dispatch将数据提交到actions中,actions通过commit发送到mutations修改state中的数据
简化写法
可以在点击事件出发的时候直接使用commit方法直接提交到mutations中修改state中的数据
- 组件中的点击事件
methods: {
handleCityClick (city) {
console.log(city)
this.$store.commit('changeCity', city)
}
},
- store中的方法
export default new Vuex.Store({
state: {
city: '北京'
},
mutations: {
changeCity (state, city) {
state.city = city
}
}
})
Vuex的高级使用
1. 使用html5中的localStorage存储state数据
let defaultCity = '上海'
// 添加try防止用户本地缓冲异常或者隐身模式,导致异常
try {
if (localStorage.city) {
defaultCity = localStorage.city
}
} catch (e) {}
export default new Vuex.Store({
state: {
city: defaultCity
},
mutations: {
changeCity (state, city) {
state.city = city
try {
localStorage.city = city
} catch (e) {}
}
}
})
2. 拆分store
针对原来的store的文件我们将其拆分为三部分
第一本分 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) {}
}
}
第三部分 store.js部分
import Vue from 'vue'
import Vuex from 'vuex'
import state from './state'
import mutations from './mutations'
Vue.use(Vuex)
export default new Vuex.Store({
state,
mutations
})
3. 使用mapState和mapMutations
第一种:
// 先引入mapState
import { mapState } from 'vuex'
// 将state中的city给组件的date中
export default {
name: 'Header',
computed: {
...mapState(['city'])
}
}
// 使用
<div class="header-right">
{{this.city}}
<span class="iconfont arrow-icon"></span>
</div>
第二种:
// 引入mapSate和mapMutations
import { mapState, mapMutations } from 'vuex'
// 使用...mapMutations(['changeCity'])将city数据commit到Mutations中
export default {
name: 'CityList',
computed: {
...mapState({
currentCity: 'city'
})
},
methods: {
handleCityClick (city) {
this.changeCity(city)
this.$router.push('/')
},
...mapMutations(['changeCity'])
}
// ...
}