总结
getter | state | mutations | actions |
---|---|---|---|
类似 computed 可以根据state计算出值,并根据 state 响应 | 相当于data | 相当于methods | 做数据请求,发送给methods |
this.$store.getter | this.$store.state | 通过 this.$store.commit() 触发函数内可以接受对象或字符串 https://vuex.vuejs.org/zh/guide/mutations.html | |
this.$emit('父自定义事件名') 类似 |
最好提前在你的 store 中初始化好所有所需属性
当需要在对象上添加新属性时,你应该使用
Vue.set(obj, 'newProp', 123)
或者以新对象替换老对象。例如,利用对象展开运算符我们可以这样写:
state.obj = { ...state.obj, newProp: 123 }
- 在组件内需要获取数据时
import { mapGetters, mapActions } from "vuex";
export default {
...
methods: {
...mapActions(["getHomeData"]) 数组里是action
},
computed: {
...mapGetters(["homeData"])
}
然后在created钩子内请求
created(){
this.getHomeData() 这个触发 action。action触发mutations,mutations改变state。
但是这些都是异步的,所以你在 this.getHomeData() 后访问新的数据还是空。
}
解决办法:
watch: {
homeData(newValue, oldValue) {
在watch中赋值当前组件的data为 state内的新数据
this.listsData={...this.homeData}
}
},
}
- 在vuex中,通过
this.$store.state
可以直接访问到state中的数据,但是如果这种操作过多,存在修改数据混乱,不能快速定位到错误的位置。
介绍
Vuex 是 vue 的状态管理工具,它的主要功能是实现多组件间的状态共享。它由一个集中式的存储仓库管理状态,类比本地存储,数据库。我们可以将数据放在 store 的 state 中,实现共享。
组成
state
状态action
动作(业务交互:用户交互和数据交互)mutation
修改state
getter
计算属性store
Vuex 实例存储者
起步
npm i vuex -S
src
文件下打造store
目录main.js 引入 Vuex 实例
store
目录结构
-index.js
-state.js
-aciton.js
-mutation.js
-getter.js
main.js
import store from './store'
new Vue({
store,
render: h => h(App),
}).$mount('#app')
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import State from './State'
import Actions from './Actions'
import Mutations from './Mutations'
import Getters from './Getters'
Vue.use(Vuex)
const store = new Vuex.Store({
// 属性名除 State 外必须 +s
State,
Actions,
Mutations,
Getters,
})
export default store
state.js
this.$store.state || mapState
const State = {
...
}
export default State
import { mapState } from 'vuex'
computed: { ...mapState(['count']) }
修改 State
注意,以下操作虽然可以直接改变 state,但这是明确被禁止的
Vue 中不能在组件中直接操作原型上的 state
this.$store.state.count++
action.js
aciton
与mutation
之间的沟通通过commit
方法进行,其中的aciton
对象有两个属性分别是type
和payload
。其中type
必须为一个大写的const
常量,安全性高。
import * as type from './type'
const actions ={
/*
commit: ƒ boundCommit(type, payload, options)
dispatch: ƒ boundDispatch(type, payload)
getters: {}
rootGetters: {}
rootState: {__ob__: Observer}
state: {__ob__: Observer}
__proto__: Object
*/
increment({ commit }, payload) {
这里第一个参数为一个'精简版'的 store 对象,结构赋值获取 commit 方法,上边注释就是这个对象。
let action={
type:type.INCREMENT,
payload
}
commit(action)
}
}
export default actions
mutation.js
- mutations 也是一个对象,用来修改 state 中数据。
- mutations 中的方法用常量来表示
- 方法中的参数分别为 state 和 action,分别对应store 中的 state 和 actions 方法中的 action 对象
import * as type from './type'
const mutations = {
[type.INCREMENT]( state, action) {
关于 [type.INCREMENT]
1. type.INCREMENT(){}直接这么写是错的,因为属性名默认为字符串不解析
2. 上面写法相当于在对象内 type.INCREMENT:funciton(){} 所以还是字符串
state.count = action.payload
}
}
export default mutations
getter.js
const getters = {
这里的第一个参数就是 state 类比事件处理函数中的 e
getInfo: state => state.count
}
export default getters
type.js
这里通过单独的type.js
文件,做到修改一个更新全部的目的
export const INCREMENT = 'INCREMENT'
export const ADD = 'ADD'
export const REMOVE = 'REMOVE'
Vuex的使用(state修改的前后)
- 前(修改)
前标准(走actions)
this.$store.dispatch('actions_name', payload_value)
非标准(走 mutations)
<button @click="clickHandle">
clickHandle(){
this.$store.commit('mutationsFN', val)
}
mutationsFN(state, newValue){
state.xx = newValue
}
或
<button @click="clickHandle">
clickHandle(){
this.$store.commit('mutationsFN', val)
}
mutationsFN(state, payload){
state.xx = payload.value
}
this.$store.commit({
type: 'mutationsFN',
value: xx
})
vuex-mutation-对象风格的提交方式
https://vuex.vuejs.org/zh/guide/mutations.html
- 后(获取)
后标准(通过 getter 获取 state)
这里的fn对应 getter.js 中 getters 对象内的方法名。其中第一个参数为 state
this.$store.getters.fn
非标准(直接获取 state)
this.$store.state.count
- 新增
addStateHandle(){
this.$set(this.$store.state, 'newProp', 123)
或
this.$store.replaceState({
...this.$store.state,
newAdd: 'newAdd'
})
}
component --> action --> mutation --> state <–getter<–component
前标准关键:通过 dispatch 使用 action 内的 actions
后标准关键:通过 this.$store.getters 访问 store 内的数据
通过 Vuex 提供的四种简化辅助工具操作 vuex
mapState
import { mapState } from 'vuex';
computed: {
...mapState(['prpo'])
},
mapGetters()
import { mapGetters } from 'vuex';
computed: {
...mapGetters([getters_FnName]),
xxx,xxx
}
mapActions()
import { mapActions } from 'vuex';
methods: {
...mapActions([Actions_FnName]),
}
mapMutations
(非标准)使用这个工具后mutations对象内的方法第二个参数aciton为val,不在为{type:,payload}的对象
import { mapMutations } from 'vuex';
methods:{
...mapMutations( ['mutations_FnName'] ), // 将 `this.mutations_FnName()` 映射为 `this.$store.commit('mutations_FnName')`
}
<button @click="mutations_FnName(value)">
或
methods:{
...mapMutations(['mutations_FnName']),
mutationsHandle(){
this.mutations_FnName(value)
}
}
<button @click="mutationsHandle">
数据交互
public
目录下新建 data.json
const state = {
}