最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

vuex相关笔记

来源：博客园

vuex是什么？

vuex是管理应用程序状态，实现组件间通信的。


(资料图片仅供参考)

为什么使用vuex?

在开发大型应用的项目时，会出现多个视图组件依赖一个同一个状态，来自不同视图的行为需要变更同一个状态。

在遇到以上问题，就要用到vuex，他能把组件的共享状态抽取出来，当做一个全局单例模式进行管理，不管在何处改变状态，都会通知使用该状态的组件作出相应的修改。

最简单的vuex实例

1 import Vue from "vue"; 2 import Vuex form "vuex"; 3  4 Vue.use(Vuex); 5  6 const store = new Vuex.Store({ 7     state: { 8         count: 0 9     },10     mutations: {11         increment (state) {12             state.count++13         }14     }15 })

以上就是一个简单的vuex实例，每一个vuex应用就是一个store，在store中包含组件中的共享状态state和改变状态的方法mutations。

需要注意的是只能通过mutations改变store的state的状态，不能通过store.state.count = 5；直接更改，state相当于对外的只读属性。

使用store.commit方法触发mutations改变state:

1 store.commit("increment"); 2 3 console.log(store.state.count) //

在Vue组件中使用vuex

如果希望Vuex状态更新，相应的Vue组件也得到更新，最简单的方法就是在Vue的computed（计算属性）获取state

// Counter 组件const Counter = {    template: `
{{ count }}
`,    computed: {        count () {            return store.state.count;        }    }}

上面的例子是直接操作全局状态store.state.count，那么每个使用该Vuex的组件都要引入。为了解决这个，Vuex通过store选项，提供了一种机制将状态从根组件注入到每一个子组件中。

1 // 根组件 2 import Vue from "vue"; 3 import Vuex form "vuex"; 4  5 Vue.use(Vuex); 6 const app = new Vue({ 7     el: "#app", 8     store, 9     components: {10         Counter11     },12     template: `13         
14             15         
16     `17 })

通过这种注入机制，就能在子组件Counter通过this.$store访问：

1 // Counter 组件2 const Counter = {3     template: `
{{ count }}
`,4     computed: {5         count () {6             return this.$store.state.count7         }8     }9 }

mapState函数

1 computed: {2     count () {3         return this.$store.state.count4     }5 }

这样通过count计算属性获取同名state.count属性，是不是显得太重复了，我们可以使用mapState函数简化这个过程。

1 import { mapState } from "vuex";2 3 export default {4     computed: mapState ({5         count: state => state.count,6         countAlias: "count",    // 别名 `count` 等价于 state => state.count7     })8 }

简便方法为：

computed: mapState([  // 映射 this.count 为 store.state.count  "count"])

Getters对象：

如果我们需要对state对象进行做处理计算，如下：

1 computed: {2 3     doneTodosCount () {4 5         return this.$store.state.todos.filter(todo => todo.done).length6     7     }8 9 }

如果多个组件都要进行这样的处理，那么就要在多个组件中复制该函数。这样是很没有效率的事情，当这个处理过程更改了，还有在多个组件中进行同样的更改，这就更加不易于维护。

Vuex中getters对象，可以方便我们在store中做集中的处理。Getters接受state作为第一个参数：

1 const store = new Vuex.Store({ 2   state: { 3     todos: [ 4       { id: 1, text: "...", done: true }, 5       { id: 2, text: "...", done: false } 6     ] 7   }, 8   getters: { 9     doneTodos: state => {10       return state.todos.filter(todo => todo.done)11     }12   }13 })

在Vue中通过store.getters对象调用。

1 computed: {2   doneTodos () {3     return this.$store.getters.doneTodos4   }5 }

Getter也可以接受其他getters作为第二个参数：

1 getters: {2   doneTodos: state => {3       return state.todos.filter(todo => todo.done)4   },5   doneTodosCount: (state, getters) => {6     return getters.doneTodos.length7   }8 }

mapGetters辅助函数

与mapState类似，都能达到简化代码的效果。mapGetters辅助函数仅仅是将store中的getters映射到局部计算属性：

1 import { mapGetters } from "vuex" 2  3 export default { 4   // ... 5   computed: { 6     // 使用对象展开运算符将 getters 混入 computed 对象中 7     ...mapGetters([ 8       "doneTodosCount", 9       "anotherGetter",10       // ...11     ])12   }13 }

上面也可写成：

1 computed: mapGetters([2       "doneTodosCount",3       "anotherGetter",4       // ...5     ])

所以在Vue的computed计算属性中会存在两种辅助函数：

1 import { mapState, mapGetters } form "vuex";2 3 export default {4     // ...5     computed: {6         mapState({ ... }),7         mapGetter({ ... })8     }9 }

Mutations

之前也说过了，更改Vuex的store中的状态的唯一方法就是mutations。

每一个mutation都有一个事件类型type和一个回调函数handler。

1 const store = new Vuex.Store({ 2   state: { 3     count: 1 4   }, 5   mutations: { 6     increment (state) { 7       // 变更状态 8       state.count++ 9     }10   }11 })

调用mutation，需要通过store.commit方法调用：

store.commit("increment")

Payload 提交载荷

也可以向store.commit传入第二参数，也就是mutation的payload:

1 mutaion: {2     increment (state, n) {3         state.count += n;4     }5 }6 7 store.commit("increment", 10);

单单传入一个n，可能并不能满足我们的业务需要，这时候我们可以选择传入一个payload对象：

1 mutation: { 2     increment (state, payload) { 3         state.totalPrice += payload.price + payload.count; 4     } 5 } 6  7 store.commit({ 8     type: "increment", 9     price: 10,10     count: 811 })

mapMutations函数

mutations也有映射函数mapMutations，帮助我们简化代码，使用mapMutations辅助函数将组件中的methods映射为store.commit调用。

1 import { mapMutations } from "vuex" 2  3 export default { 4   // ... 5   methods: { 6     ...mapMutations([ 7       "increment" // 映射 this.increment() 为 this.$store.commit("increment") 8     ]), 9     ...mapMutations({10       add: "increment" // 映射 this.add() 为 this.$store.commit("increment")11     })12   }13 }

Mutations必须是同步函数。

如果需要异步操作，Mutations就不能满足我们需求了，这时候我们就需要Actions了。

关键词： 辅助函数 就是一个 应用程序