Vue核心知识--Vuex

ゝ一世哀愁。 2023-08-17 16:30 141阅读 0赞

**目录**

Vuex-集成

Vuex之state和getters

State

Getter

Vuex之Mutation和Action

Mutation

Action

Vuex之模块

Module

Vuex之其他的一些API和配置

--------------------

## Vuex-集成 ##

1.声明一个store,并在应用入口new Vue中引入这个store，下面是结构：

![20191007144515535.png][]

app.js:

const state = {
      count: 0
    }
    
    // getters
    const getters = {
      
    }
    
    // actions
    const actions = {
     
    }
    
    // mutations
    const mutations = {
      updateCount (state,num) {
        state.count = num
      }
    }
    export default {
      state,
      getters,
      actions,
      mutations
    }

user.js:

const state = {
      
    }
    
    // getters
    const getters = {
      
    }
    
    // actions
    const actions = {
     
    }
    
    // mutations
    const mutations = {
      
    }
    
    export default {
      state,
      getters,
      actions,
      mutations
    }

index.js:

import Vue from 'vue'
    import Vuex from 'vuex'
    import user from './modules/user'
    import app from './modules/app'
    
    
    Vue.use(Vuex)
    
    const debug = process.env.NODE_ENV !== 'production'
    
    export default new Vuex.Store({
      modules: {
        user,
        app
      },
    })

最后在main.js中引入：

import Vue from 'vue'   //引用vue类库
    import App from './app.vue'
    import router from './router'
    import store from './store'
    // import './assets/styles/test.css'
    // import './assets/styles/test-stylus.styl'
    // import './assets/images/bg.png'
    // 开发todo应用时用不到以上这些,故注释掉
    
    import './assets/styles/global.styl'
    
    
    new Vue({
      router,
      store,
      render: (h) => h(App)   
      //vue在创建Vue实例时,通过调用render方法来渲染实例的DOM树,也就是这个组件渲染的是App的内容
      //vue在调用render方法时,会传入一个createElement函数作为参数,也就是这里的h的实参是createElement函数,然后createElement会以App为参数进行调用
    }).$mount('#app') //挂载html的root节点下面

使用（app.vue）：

<template>
      <div id="app">
        <div id="cover"></div>
        <Header></Header>
        <p>{
       {count}}</p>
        
        <router-link to="/app">app</router-link>
        
        <router-link to="/login">login</router-link>
        <transition name="fade">
          <router-view/>
        </transition>
    
        <Footer></Footer>
      </div>
    </template>
    
    <script>
    import Header from "./todo/header.vue";
    import Footer from "./todo/footer.jsx";
    // import Todo from "./todo/todo.vue";
    
    export default {
      components: {
        Header,
        Footer,
        // Todo
      },
      mounted () {
        console.log(this.$store)
        let i = 1
        setInterval(() => {
          this.$store.commit('updateCount', i++)
        },1000)
      },
      computed: {
        route () {
          return this.$route
        },
        count () {
          return this.$store.state.app.count;
        }
      },
    };
    </script>
    
    <style lang="stylus" scoped>
    #app {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
    
      #cover {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: #999;
        opacity: 0.2;
        z-index: -1;
      }
    }
    </style>

## Vuex之state和getters ##

相应的博客文章：[在vue项目中引入vuex][vue_vuex]

### State ###

Vuex使用单一状态树----是的，用一个对象就包含了全部的应用层级状态。这也意味着，每个应用将仅仅包含一个store实例。单一状态树让我们能够直接地定位任一特定地状态片段，在调试地过程中也能轻易地取得整个当前应用状态地快照。

state为store中最基本地状态。既然Vuex的state中的状态是响应式的，那么当我们变更状态时，监视状态的Vue组件也会自动更新。这也意味着Vuex中的mutations也需要与使用Vue一样遵守一些注意事项：最好提前在你的store中初始化好所有所需属性，当需要在对象上添加新属性时，你应该使用Vue.set(obj,'newProp',123),或者以新对象替换老对象。建议使用mutation来改变state里面的值，因为不通过mutation改变state，状态不会被同步。

**mapState辅助函数：**

当一个组件需要获取多个状态时，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用mapState辅助函数帮助我们生成计算属性。

// 在单独构建的版本中辅助函数为 Vuex.mapState
    import { mapState } from 'vuex'
     
    export default {
      // ...
      computed: mapState({
        // 箭头函数可使代码更简练
        count: state => state.count,
     
        // 传字符串参数 'count' 等同于 `state => state.count`
        countAlias: 'count',
     
        // 为了能够使用 `this` 获取局部状态，必须使用常规函数
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      })
    }

当映射的计算属性的名称与state的子节点名称相同时，我们也可以给mapState传一个字符串数组

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

**对象展开运算符：**

mapState函数返回的是一个对象。通过ES的对象展开运算符来，极大的简化写法：

computed: {
      localComputed () { /* ... */ },
      // 使用对象展开运算符将此对象混入到外部对象中
      ...mapState({
        // ...
      })
    }

### Getter ###

Getter，通俗的理解可以认为是getter里的函数就是vuex里的计算属性，类似于computed函数。

有时候我们需要从store中的state中派生出一些状态。例如对列表进行过滤并计数：

computed: {
      doneTodosCount () {
        return this.$store.state.todos.filter(todo => todo.done).length
      }
    }

如果有多个组件需要用到此属性，我们要么复制这个函数，或者抽取到一个共享函数然后在多处导入它---无论哪种方式都不是很理想。

Vuex允许我们在store中定义“getter”(可以认为是store的计算属性)。就像计算属性一样，getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。getter接受store作为第一个参数，暴露为store.getters。getters还可以接受其他getters作为第二个参数

Getter接受state作为其第一个参数：

const store = new Vuex.Store({
      state: {
        todos: [
          { id: 1, text: '...', done: true },
          { id: 2, text: '...', done: false }
        ]
      },
      getters: {
        doneTodos: state => {
          return state.todos.filter(todo => todo.done)
        }
      }
    })

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

getters: {
      // ...
      doneTodosCount: (state, getters) => {
        return getters.doneTodos.length
      }
    }

注意，getter在通过属性访问时是作为Vue的响应式系统的一部分缓存其中的。

**通过方法访问：**

可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。

getters: {
      // ...
      getTodoById: (state) => (id) => {
        return state.todos.find(todo => todo.id === id)
      }
    }

store.getters.getTodoById(2) // -> { id: 2, text: '...', done: false }

**mapGetters辅助函数：**

mapGetters辅助函数仅仅是将store中的getter映射到局部计算属性：

import { mapGetters } from 'vuex'
     
    export default {
      // ...
      computed: {
      // 使用对象展开运算符将 getter 混入 computed 对象中
        ...mapGetters([
          'doneTodosCount',
          'anotherGetter',
          // ...
        ])
      }
    }

如果想将一个getter属性另取一个名字，使用对象形式：

mapGetters({
      // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount`
      doneCount: 'doneTodosCount'
    })

### Vuex之Mutation和Action ###

### Mutation ###

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 **事件类型 (type)** 和 一个 **回调函数 (handler)**。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数：

const store = new Vuex.Store({
      state: {
        count: 1
      },
      mutations: {
        increment (state) {
          // 变更状态
          state.count++
        }
      }
    })

之前写的更详细：[Mutation][]

### Action ###

Action 类似于 mutation，不同在于：

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

文章：[Action][]

## Vuex之模块 ##

### Module ###

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，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 的状态

详细文章：[Module][]

**热重载：**

// store.js
    import Vue from 'vue'
    import Vuex from 'vuex'
    import mutations from './mutations'
    import moduleA from './modules/a'
    
    Vue.use(Vuex)
    
    const state = { ... }
    
    const store = new Vuex.Store({
      state,
      mutations,
      modules: {
        a: moduleA
      }
    })
    
    if (module.hot) {
      // 使 action 和 mutation 成为可热重载模块
      module.hot.accept(['./mutations', './modules/a'], () => {
        // 获取更新后的模块
        // 因为 babel 6 的模块编译格式问题，这里需要加上 `.default`
        const newMutations = require('./mutations').default
        const newModuleA = require('./modules/a').default
        // 加载新模块
        store.hotUpdate({
          mutations: newMutations,
          modules: {
            a: newModuleA
          }
        })
      })
    }

## Vuex之其他的一些API和配置 ##

*  registerModule
 *  unregisterModule
 *  watch
 *  subscribe
 *  plugins

**registerModule**

registerModule(path: string | Array<string>, module: Module, options?: Object)

注册一个动态模块。[详细介绍][Link 1]

`options` 可以包含 `preserveState: true` 以允许保留之前的 state。用于服务端渲染。

**unregisterModule**

unregisterModule(path: string | Array<string>)

卸载一个动态模块。[详细介绍][Link 1]

**watch**

watch(fn: Function, callback: Function, options?: Object): Function

响应式地侦听 `fn` 的返回值，当值改变时调用回调函数。`fn` 接收 store 的 state 作为第一个参数，其 getter 作为第二个参数。最后接收一个可选的对象参数表示 Vue 的 [`vm.$watch`][vm._watch] 方法的参数。

要停止侦听，调用此方法返回的函数即可停止侦听。

**subscribe**

subscribe(handler: Function): Function

订阅 store 的 mutation。`handler` 会在每个 mutation 完成后调用，接收 mutation 和经过 mutation 后的状态作为参数：

store.subscribe((mutation, state) => {
      console.log(mutation.type)
      console.log(mutation.payload)
    })

要停止订阅，调用此方法返回的函数即可停止订阅。

通常用于插件。[详细介绍][Link 2]

**plugins**

类型: **`Array<Function>`**

一个数组，包含应用在 store 上的插件方法。这些插件直接接收 store 作为唯一参数，可以监听 mutation（用于外部地数据持久化、记录或调试）或者提交 mutation （用于内部数据，例如 websocket 或 某些观察者）

[详细介绍][Link 2]

加入vue-router、vuex之后的项目节点：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

[20191007144515535.png]: /images/20230810/0ca68aeed9874351a7debca5f22a249e.png
[vue_vuex]: https://blog.csdn.net/wo_921110/article/details/90147457
[Mutation]: https://blog.csdn.net/wo_921110/article/details/90147457#Mutation
[Action]: https://blog.csdn.net/wo_921110/article/details/90147457#Action
[Module]: https://blog.csdn.net/wo_921110/article/details/90147457#Module
[Link 1]: https://vuex.vuejs.org/zh/guide/modules.html#%E6%A8%A1%E5%9D%97%E5%8A%A8%E6%80%81%E6%B3%A8%E5%86%8C
[vm._watch]: https://cn.vuejs.org/v2/api/#vm-watch
[Link 2]: https://vuex.vuejs.org/zh/guide/plugins.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70]: /images/20230810/30c610fddc7145a08fdb51027cc6afd9.png