vuex的五大核心
- state：vuex的基本数据，用来存储变量
- geeter：通过 geeter 获取 state 内的值（可以认为是 store 的计算属性）
- mutation：更新 store 中数据的唯一方法是 mutation，必须是同步的
- action： action提交的是 mutation 的方法，而不是直接变更状态。action可以包含任意异步操作。
- module：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。
注意：store 存储在内存中，页面刷新会重置 store 导致之前存储的数据丢失。解决方法见 https://www.jianshu.com/p/36f2b138048f
准备
npm install vuex --save 安装vuex
在根目录中创建store.js并导入 Vue 和 Vuex，创建一个Vuex的实例 store 最后导出 。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {},
getters:{},
mutations:{},
actions:{}
})
export default store
在 main.js 内导入 store.js 并注入到vue实例中，这样我们可以在 component 页面内使用this.$store获取到 store 内的属性和方法
import Vue from 'vue'
import App from './App.vue'
import store from './store'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
store,
}).$mount('#app')
1.state
在 store 内写入一个存有多个状态的 state
const store = new Vuex.Store({
state: {
name: '一条单身狗',
age: '18',
job: 'programmer'
}
})
在 vue 组件页面中通过 computed 计算属性 来展示数据。
export default {
data(){
return{
localCount:'我是'
}
},
computed: {
myname() {
return this.localCount + this.$store.state.name
}
},
created() {
console.log(this.myname) //我是一条单身狗
}
}
mapState 辅助函数
但是当需要展示的数据有多个时，为了减少声明多个计算属性带来的冗余我们可以使用 mapState 辅助函数。下面以获取 storte 中的 name 为例：
import { mapState } from 'vuex' //导入 mapState
export default {
data(){
return{
localCount:'我是'
}
},
computed: mapState({
computedFn1: state => state.name,
computedFn2: 'name', // 传字符串参数 'name' 等同于 computedFn1
computedFn3 (state) { // 如果需要加入局部状态参与计算还是需要使用常规函数
return this.localCount + state.name
}
}),
created() {
console.log(this.computedFn1 == this.computedFn2 == this.computedFn3) // true
},
}
当不需要加入局部状态参与计算，只是需要展示 stort 内的状态时我们也可以给 mapState 传一个字符串数组
computed: mapState(['name']) // console.log(this.name) 一条单身狗
使用对象展开运算符我们可以将 mapState 和局部计算属性混合使用（个人建议写法）
computed: {
someComputed () {},
...mapState([]) // 或者 ...mapState({ newName: 'name' }) 给注入后的 name 重新命名
}
2.getter
有时我们需要从 state 中派生出一些状态，如果有多个页面都需要使用为了减少冗余 store 提供了一个针对 state 的计算属性 getter,它和 computed 一样会将计算结果存储在内存中，当 state 更新时会重新计算。
const store = new Vuex.Store({
state: {
name: '咸鱼',
say: '我不是'
},
getters: {
getName(state) { //getter 的第一个参数必须为 state
return '一条' + state.name
},
getIntroduce: (state, getters) => { // 第二个参数不做限制，可以传入其他 getter 参与计算
return state.say + getters.getName
}
}
})
在组件内展示
computed: {
showGettersIntroduce(){
return this.$store.getters.getIntroduce // 我不是一条咸鱼
}
}
mapGetters 辅助函数
和 state 一样使用 mapGetters 辅助函数将 store 中的 getters 注入到 computed 中
import { mapGetters } from "vuex";
export default {
data() {
return {};
},
computed: {
showGettersIntroduce(){
return this.$store.getters.getIntroduce
},
...mapGetters(['getIntroduce','getName']),
...mapGetters({newName : 'getName'})
},
created() {
console.log(this.getIntroduce); // 我不是一条咸鱼
console.log(this.newName); // 一条咸鱼
}
};
3.mutation
我们明明使用 (this.$store.state.name = ' *** ') 的方式可以修改 store 中的状态，为什么vuex 官方说更改 store 中的状态的唯一方法是 提交 mutation ?
因为只有通过 mutation 更新 store 的操作会被vuex记录，可以在 vue-devtools 查看 mutation 执行记录，追踪数据的变化。
mutation 由一个 string 类型的 type ,和一个回调函数组成。回调函数可传入两个参数，第一个默认为 state，第二个参数为 payload。下面我们创建一个 type 为 modifyName 的 mutation 来修改 state 内的 name。
const store = new Vuex.Store({
state: {
name: '咸鱼',
say: '我不是'
},
mutations:{
modifyName(state,newName){
state.name = newName
}
}
})
调用 mutation 需要通过 store.commit() 方法,即提交 mutation。第一个参数指定 mutation 的 type,第二个参数为 payload
// 三种提交 mutation 的方式
this.$store.commit('modifyName','情圣')
this.$store.commit({type:'modifyName',newName:'情圣'})
this.$store.commit('modifyName',{newName:'情圣'}) // 推荐
在 devtools 可以看到生成了一条新的记录，name 更新为 '情圣'
mapMutations 辅助函数
mapMutations 和 mapStates 、 mapGetters不同，mapMutations 映射到页面的 methods 中。
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations([
'modifyName', // 将 `this.modifyName()` 映射为 `this.$store.commit('modifyName')`
// `mapMutations` 也支持载荷：
'modifyName' // 将 `this.modifyName('情圣')` 映射为 `this.$store.commit('modifyName', '情圣')`
]),
...mapMutations({
newName: 'modifyName' // 将 `this.newName()` 映射为 `this.$store.commit('modifyName')`
})
}
}
对于为什么 mutation 必须是同步？
在 mutation 中混合异步调用会导致你的程序很难调试。例如，当你调用了两个包含异步回调的 mutation 来改变状态，你怎么知道什么时候回调和哪个先回调呢？这就是为什么我们要区分这两个概念。在 Vuex 中，mutation 都是同步事务
答案：防止多个异步 mutation 执行影响 devtools 追踪记录，所以异步事务在 action 内处理。可以在 store 中开启严格模式，预防在多人开发中 mutation 内使用了异步操作。详见 https://vuex.vuejs.org/zh/guide/strict.html
4.action
action 提交的是 mutation,和 mutation 不同的是 action 内可以尽情的使用异步操作。
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。
const store = new Vuex.Store({
strict: true,
state: {
name: '咸鱼'
},
mutations: {
modifyName(state, newName) {
state.name = newName
}
},
actions: {
modifyName(context,newName) {
context.commit('modifyName',newName)
},
modifyName2({ commit },newName) { // 官网上推荐参数解构的写法
commit('modifyName',newName)
},
}
})
我们要区分 action 在页面内使用 store.dispatch 调用，mutation 通过 store.commit 执行
this.$store.dispatch ('modifyName','情圣')
this.$store.dispatch ({type:'modifyName',newName:'情圣'})
this.$store.dispatch ('modifyName',{newName:'情圣'}) // 推荐
mapActions 辅助函数
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions([
'modifyName', // 将 `this.modifyName()` 映射为 `this.$store.dispatch('modifyName')`
// `mapActions` 也支持载荷：
'modifyName2' // 将 `this.modifyName2(newName)` 映射为 `this.$store.dispatch('modifyName2', newName)`
]),
...mapActions({
modify: 'modifyName' // 将 `this.modify()` 映射为 `this.$store.dispatch('modifyName')`
})
}
}
上面只是介绍 action 的写法以及在页面内的用法，在生产中的使用一定是包含异步操作的，下面是官网的说明。
store.dispatch 可以处理被触发的 action 的处理函数返回的 Promise，并且 store.dispatch 仍旧返回 Promise。
我们在 action 内使用 Promise 包裹异步操作就可以了
actions: {
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
},
actionB ({ dispatch, commit }) {
return dispatch('actionA').then(() => {
commit('someOtherMutation')
})
}
}
store.dispatch 仍旧返回 Promise
this.$store.dispatch('actionA').then(() => {
// ...do someth
})
【↓↓有收获请点个赞哦~~】