前面一篇章介绍了组件的基本的通信，但是对于负责的项目来说还是略显单薄，所以今天再来介绍vue通信的另外一个重要角色 --- vuex
vuex 的存在主要是来解决非父子组件，兄弟组件所存在的缺陷。vuex主要的内容分为，state, mutations,actions, getters, modules
import Vue from 'vue';
import Vuex from 'vuex';
import mutations from './mutations'
import actions from './actions'
import getters from './getters'
Vue.use(Vuex); //需要在这里注册然后才可以使用
const state = {
count: 0,
message: 'this is vuex'
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
state
这个属性主要的作用就是用来存储vuex管理的实例
const state = {
count: 0,
message: 'this is vuex'
}
mutaitions
要知道状态管理的属性（state)只能用来读取，而不能进行进修修改，只能通过mutatiosns来对它进行操作
mutaitions 就是对状态管理的属性进行一些修改操作（变更状态）
- 官方不建议把异步放这里 ( 如果异步操作了数据，组件在commit后，数据不能立即更新，而且不知道什么时候更新）
const mutations = {
increment (state) {
state.count++;
}
}
export default mutations;
在vue中使用它
template:
{{count}}
<button @click = "increment"> 点我 +</button>
computed: {
count: function () {
return this.$store.state.count
}
},
methods: {
increment () {
this.$store.commit('increment') // 通过this.$store.commit方法来执行mutations
}
}
actions
actions和mutations很相似，不同在于action中可以提交mutations;
actions函数接收一个与store实例具有相同方法和属性的context对象； 因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
- 官方建议把异步放在这里进行处理 （个人感觉并没有特别的地方😆）
const actions = {
incrementAction (context) {
context.commit('increment');
},
asyncIncrement (context) {
return new Promise(resolve => {
setTimeout(() => {
context.commit('increment');
resolve();
}, 1000);
})
}
}
export default actions;
如何去使用这个东西呢？
incrementAction () {
this.$store.dispatch('incrementAction')
},
asyncIncrementAction () {
this.$store.dispatch('asyncIncrement').then(() => {
console.log(this.$store.state.count);
})
}
getter
getters 和 vue 中的 computed 类似 , 都是用来计算 state 然后生成新的数据 ( 状态 ) 的。
export default {
count (state, getters) { // 参数说明： arg1: state实例 arg2: 也可以是getters自身
return state.count > 5 ? '傻瓜' : '很棒哦'
}
}
countGetter: function () {
return this.$store.getters.count
}
modules
这个其实项目用得相对比较少，它是用来把store分割到不同的模块。但项目大的时候当个的store可能并不能满足业务需求，就有可能造成store过于庞大，所以就需要进行拆分，而modules正好可以派上用场。
const moduleA = {
state: { ... },
mutations: { ... },
actions: { ... },
getters: { ... }
}
const moduleB = {
state: { ... },
mutations: { ... },
actions: { ... }
}
const store = new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
store.state.a // -> `moduleA`'s state
store.state.b // -> `moduleB`'s state
- 最后
对于vuex之前一直存在一个疑问，就是刷新之后的数据就不存在了，当然有解决办法
就是配置本地存储一起使用eg: locationStorage/sessionStorage，但是本地存储了之后，为什么还要
绕到vuex中去写？这根本就没必要啊，反而复杂了
结论：
vuex的作用，vuex主要用在父子组件通信或者子子组件间通信，如果不用vuex通信就得通过复杂的事件触发完成。
只是用于这些组件通信使用。
vuex 主要是负责通信的，而不是全局存储
网友评论