vuex基础

---

前言

提示：这里可以添加本文要记录的大概内容：
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

一 初始化功能

• 第一步：npm i vuex --save => 安装到**运行时依赖**

• 第二步： 在main.js中 import Vuex from 'vuex'

• 第三步：在main.js中 Vue.use(Vuex) => 调用了 vuex中的 一个install方法

• 第四步：const store = new Vuex.Store({...配置项})

• 第五步：在根实例配置 store 选项指向 store 实例对象

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex)
const store = new Vuex.Store({})
new Vue({
  el: '#app',
  store
})

1-state

state是放置所有公共状态的属性，如果你有一个公共状态数据 ， 你只需要定义在 state对象中

// 初始化vuex对象
const store = new Vuex.Store({
  state: {
    // 管理数据
    count: 0
  }
})

组件中获取 state值

1 this.$store.xxx

<div> state的数据：{{ $store.state.count }}</div>

// 把state中数据，定义在组件内的计算属性中
  computed: {
    count () {
      return this.$store.state.count
    }
  }

 <div> state的数据：{{ count }}</div>

2 辅助函数 - mapState

第一步：导入mapState

import { mapState } from 'vuex'

第二步：采用数组形式引入state属性 利用延展运算符将导出的状态映射给计算属性

   computed: {   
    ...mapState(['count']) 
     }
     <div> state的数据：{{ count }}</div> 

2 -mutations

state数据的修改只能通过mutations，并且mutations必须是同步更新，目的是形成**数据快照**

const store  = new Vuex.Store({
  state: {
    count: 0
  },
  // 定义mutations
  mutations: {
    // 方法里参数 第一个参数是当前store的state属性
    // payload 载荷 运输参数 调用mutaiions的时候 可以传递参数 传递载荷
    addCount (state，payload ) {
      state.count += payload 
    }
     
  }
})

组件中调用mutations

1 this.$store.commit(方法名, 载荷参数)

<template>
  <button @click="addCount">+1</button>
</template>

<script>
export default {
    methods: {
    //   调用方法
      addCount () {
         // 调用store中的mutations 提交给muations
        // commit('muations名称', 2)
        this.$store.commit('addCount', 10)  // 直接调用mutations
    }
  }
}
</script>

2 辅助函数 - mapMutations

mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

import  { mapMutations } from 'vuex'
methods: {
    ...mapMutations(['addCount'])
}
<button @click="addCount(100)">+100</button>

3 -actions

state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作

 actions: {
  //  获取异步的数据 context表示当前的store的实例 可以通过 context.state 获取状态 也可以通过context.commit 来提交mutations， 也可以 context.diapatch调用其他的action
    getAsyncCount (context) {
      setTimeout(function(){
        // 一秒钟之后 要给一个数 去修改state
        context.commit('addCount', 123)
      }, 1000)
    }
 } 

组件调用actions

1 原始调用 - this.$store.dispatch(‘方法名’)

 addAsyncCount () {
     this.$store.dispatch('getAsyncCount', 123)
 }

2 辅助函数 -mapActions

import { mapActions } from 'vuex'
methods: {
    ...mapActions(['getAsyncCount'])
}

<button @click="getAsyncCount(111)">+异步</button>

4 -getters

除了state之外，有时我们还需要从state中派生出一些状态，这些状态是依赖state的，此时会用到getters

state: {
    list: [1,2,3,4,5,6,7,8,9,10]
}，
  getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

组件获得getters方式

1 this.$store.getters.函数名

<div>{{ $store.getters.filterList }}</div>

2 辅助函数 - mapGetters

computed: {
    ...mapGetters(['filterList'])
}
 <div>{{ filterList }}</div>

二 Vuex中的模块化-Module

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

定义两个模块 user 和 setting

const store  = new Vuex.Store({
  modules: {
    user: {
       state: {
         token: '12345'
       }
    },
    setting: {
      state: {
         name: 'Vuex实例'
      }
    }
  })
  
<template>
  <div>
      <div>用户token {{ $store.state.user.token }}</div>
      <div>网站名称 {{ $store.state.setting.name }}</div>
  </div>
</template>

Module组件间的调用1

1 $store.state.模块名称.属性名

2 根级别的getters 设置

const store  = new Vuex.Store({
 computed: {
       ...mapGetters(['token', 'name'])
 }
  modules: {
    user: {
       state: {
         token: '12345'
       }
    },
    setting: {
      state: {
         name: 'Vuex实例'
      }
    }
  })
  

通过mapGetters引用

 computed: {
       ...mapGetters(['token', 'name'])
 }

3 模块化中的命名空间

想保证内部模块的高封闭性，我们可以采用namespaced来进行设置

  user: {
       namespaced: true,
       state: {
         token: '12345'
       },
       mutations: {
        //  这里的state表示的是user的state
         updateToken (state) {
            state.token = 678910
         }
       }
    },

1 组件间的调用

方案1：直接调用-带上模块的属性名路径

test () {
   this.$store.dispatch('user/updateToken') // 直接调用方法
}

方案2：辅助函数-带上模块的属性名路径

  methods: {
       ...mapMutations(['user/updateToken']),
       test () {
           this['user/updateToken']()
       }
   }
  <button @click="test">修改token</button>

方案3： createNamespacedHelpers 创建基于某个命名空间辅助函数

import { mapGetters, createNamespacedHelpers } from 'vuex'
const { mapMutations } = createNamespacedHelpers('user')
<button @click="updateToken">修改token2</button>