vuex是干啥的?
- Vuex是一个专门为vueJS程序开发的状态管理模式,他以集中式存储管理所有组件的状态!
什么时候使用Vuex?
- 不是所有的Vue项目都需要使用Vuex!
- 一般在大中型项目中才会使用Vuex(状态管理的结构清晰修改简单,易于维护)!
- 多个组件共享状态时或组件间传值频繁时!
项目中如何使用Vuex?
- 首先你有完善的node环境,有一个搭建完成的vue项目
- 安装Vuex
$ npm install --save vuex
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const Store = new Vuex.Store({
state:{
name: 'MY',
age: '18',
},
mutations: {
changeName(state,name) {
state.name = name;
},
changeAge(state,age) {
state.age = age;
},
changeAll(state,abj) {
for (let k in obj) {
state[k] = obj[k]
}
}
},
getters: {
filterName (state,getters) {
return state.name + '-----' + getters.filterAge
},
filterAge (state) {
return Number(state.age) + 10
}
},
actions: {
changeName({ commit },name) {
commit('changeName',name)
},
changeAge({ commit },age) {
commit('changeAge',age)
},
changeAll({ commit }, obj) {
commit('changeAll',obj)
}
},
})
export default Store;
import Vue from 'vue';
import router from './Route/router'
import store from './store';
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
// 页面中显示state
<template>
<div class="hello">
<h1>{{ message }}</h1>
<div>{{ filterName }}</div>
<h2>{{`我叫${name},今年${age}岁`}}</h2>
</div>
</template>
<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
export default {
data() {
return {
message: '实例组件'
}
},
computed: {
...mapState(['name','age']),
...mapGetters(['filterName',['filterAge'])
},
created() {
this.$store.commit('changeAll', {name:'MY',age:'50'})
this.$store.dispatch('changeName', 'MY')
this.changeAll({name:'MY',age:'50'});
this.changeName('MY')
},
motheds: {
...mapMutations(['changeAge','changeAll']),
...mapActions(['changeName'])
}
}
</script>
<style scoped lang="scss">
<style>
- 有一种偏门的办法去修改state的状态
但是强烈建议不要使用这种方式去访问和修改state的状态值(因为可能会出现意想不到的问题,因为vuex官方并没有介绍可以使用这种方法来改变或者访问state,所以最好不要在项目中使用这种方式,目前仍然是可以实现效果的,但是在vuex版本不断更新后,将来的某个时候有可能无法通过这种方式达到目的,而导致项目出现问题)
this.$store.state.name------可以访问到状态管理的state,可以直接差值写入页面
this.$store.state.name = '某值'------可以更改状态管理的state的值