Vue学习(9)-vuex

一、vuex的基本使用

Store\index.js

import Vue from 'vue' import Vuex from 'vuex' //安装插件 Vue.use(Vuex) // 创建对象 export default new Vuex.Store({ state: { // counter: 1000 }, mutations: { }, actions: { }, modules: { } })

Mutations

mutation是用来追踪状态变化，可在devtools里查看

//index.js mutations: { //方法 increment(state) { state.counter++ }, decrement(state) { state.counter-- } }, //App.vue <template> <button @click="addition">+</button> <button @click="subtraction">-</button> </template> <script> methods: { addition() { this.$store.commit('increment') }, subtraction() { this.$store.commit('decrement') } } </script>

Mutation可以携带参数传参

//.vue <button @click="addCount(5)">+5</button> <button @click="addStu">++</button> addCount(count) { //Payload载荷 this.$store.commit('incrementCount', count) }, addStu() { const stu = {id: 3, text: '...', done: false} this.$store.commit('incrementStu', stu) }, addCount2(count) { this.$store.commit({ type: 'incrementCount2', count }) incrementCount(state, count) { state.counter += count }, incrementStu(state, stu) { state.todos.push(stu) } //另一种提交风格 incrementCount2(state, payload) { state.counter += payload.count }

Mutations中必须是同步操作，异步的话devtool会无法追踪，就要用到action

Getters

可以认为是 store 的计算属性

state: { counter: 1000, todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false }, { id: 3, text: '...', done: false } ] }, getters: { //对state中数据进行处理 powerTodos(state) { return state.todos.filter(s => s.id >1) }, //还可同时调用getters里的数据 doneTodos(state, getters) { return getters.powerTodos.length }, //想要在网页通过传来的数进行处理 cutTodos(state) { return function (id) { return state.todos.filter(s => s.id > id) } } }, //.vue <div> <h2>{{$store.getters.powerTodos}}</h2> <h2>{{$store.getters.doneTodos}}</h2> <h2>{{$store.getters.cutTodos(2)}}</h2> </div>

vuex的数据响应原理

changeInfo() { this.$store.commit('updateInfo') } updateInfo(state) { //注释掉的是非响应式的 // state.info.id = '6' Vue.set(state.info, 'id', '6') // delete state.info.id Vue.delete(state.info, 'id') }

Actions

Action 类似于 mutation，不同在于：

Action 提交的是 mutation，而不是直接变更状态。Action 可以包含任意异步操作。

Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。

//.vue updateInfo() { this.$store .dispatch('a_update', 'news') .then(res => { console.log(res); }) } //index.js actions: { a_update(context, payload) { return new Promise((resolve, reject) => { setTimeout(() => { context.commit('updateInfo'); console.log(payload); resolve('111') }, 1000) }) } },

Modules

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。

为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：

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 的状态 store.state.b // -> moduleB 的状态

为了方便管理，可以将各个功能抽离，在导入会store中。

主要参考这个教学视频学习：https://www.bilibili.com/video/BV15741177Eh?p=1