vuex 知识点
-
Action 类似于 mutation，不同在于：
1.Action 提交的是 mutation，而不是直接变更状态。
2.Action 可以包含任意异步操作。 -
mutation是同步的，当需要异步操作的时候，就需要dispatch一个action。
-
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
actions: {
increment (context) {
context.commit('increment')
}
}
实践中，我们会经常用到 ES2015 的 参数解构 来简化代码（特别是我们需要调用 commit 很多次的时候）：
等价于上面的代码。
actions: {
increment ({ commit }) {
commit('increment')
}
}
-
问：页面触发action进行请求，发现vuex state中的状态确实发生了变化，但是页面需要刷新才能渲染列表？
答：我想到的解决方法：1.判断state的对应状态有值后，进行相应操作；2.用computed或watch，如果值变化，进行相应操作。 -
namespaced: true 配置的作用：
通过 [文件名]/[value] 的方式访问值，而不用挂载到全局namespace。
export const myModule = {
// This makes your getters, mutations, and actions accessed by, eg: 'myModule/myModularizedNumber' instead of mounting getters,
// mutations, and actions to the root namespace.
namespaced: true,
state: {
myModularizedNumber: 0
},
getters: {
myModularizedNumber: state => state.myModularizedNumber
},
mutations: {
setModularizedNumber(state, newNumber) {
state.myModularizedNumber = newNumber
}
}
}
- 修改store里别的module中值的方法：
1.在要修改值的module中，写一个mutation；
2.在vue组件中触发的话，语句如下：
this.$store.commit('[module_name]/[mutation]')
-
store中的值，在mutations中才能修改。
-
从store中取时间，并做倒计时显示在页面上：
- data中定义要在页面上显示的数据：time
data () {
return {
time: ''
}
},
- computed中定义数据的处理：
computed: {
modifyTime () {
if (this.user !== null) {
return this.countDown(this.user.platform.modifyTime)
}
return ''
}
- methods中定义处理数据的函数：
methods: {
countDown (time) {
},
-
state作为store的唯一数据源而存在，在组件里可以使用this.$store.state来获取，但是这个数据是只读的，无法直接通过给this.$store.state赋值来达到赋值的效果。这时就轮到mutation出场了。
mutation是唯一能更改store中的状态（state）的方法，这个相当于事件，每个 mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数。 -
在 Vue.js devtools 中，mutations有type、payload 两个值。
-
vuex管理的是组件的状态，用getters可以让一个组件获取多个store中的states。
-
访问vuex中的数据和方法:
this.$store.state.数据名
this.$store.getters.方法名 -
mapGetters 辅助函数（...mapGetters）仅仅是将 store 中的 getters 映射到局部计算属性，其实也就是从 getters 中获取对应的属性，跟解构类似。
-
如果所有计算属性的名称都与 state 一致，可以在 mapState 中以数组的方式进行映射。如果 Vue 中已经存在计算属性，可以通过 ES6 的展开操作符 (...) 进行组合。
-
获取store中数据的2种方式（因为store的数据有可能还不存在，所以需要判断下）：
1.在computed中获取
2.在watch中获取 -
获取vuex组件store中值的2种方式：
1.组件computed中获取store中的值（推荐）
computed: {
show: function () {
return this.user !== null
},
form: function () {
if (this.show === true) {
let obj = _.cloneDeep(this.user) // 深拷贝一份state数据
// 对obj的数据进行处理，便于显示
return obj
}
return null
},
...mapState({
user: state => state.user.auth
})
},
2.组件template中获取store中的值：
{{ $store.state.user.auth.nick | emptyFilter }}
:src=" $store.state.user.auth.icon "
-
vuex中的modules:
可以在一个module下，再新建一个module -
methods中自己定义的函数名，不要和methods中...mapActions({})中的函数同名；
如果同名的话，vue不知道该执行哪个。 -
使用如下语句引入modules时，必须在此文件夹的index.js中引入各module对应的js文件。
import * as modules from './modules'
