vuex基本理论

vuex基本理论

一、vuex是采用集中式管理组件依赖的共享数据的一个工具，可以解决不同组件数据共享问题。

结论：
① 修改state状态必须通过mutations
② mutations只能执行同步代码，类似ajax定时器之类的代码不能在mutations中执行
③ 执行异步代码，要通过actions，然后将数据提交给mutations才可以完成
④ state的状态即共享数据可以在组件中引用
⑤ 组件中可以调用action

二、初始化功能
先建立一个新的脚手架项目, 在项目中应用vuex

 vue create demo

开始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
})

三、vuex基础-state
1、定义state

// 初始化vuex对象
const store = new Vuex.Store({
    //实例化vuex的构造函数
  state: {
    // 管理数据  存储的状态
    count: 0
  }
})

2、原始形式- 插值表达式
在App.vue组件中可以使用 this.$store 获取到vuex中的store对象实例，可通过state属性属性获取count， 如下

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

3、计算属性 - 将state属性定义在计算属性中

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

4、辅助函数 - mapState 方法
mapState是辅助函数，帮助我们把store中的数据映射到 组件的计算属性中, 它属于一种方便用法
第一步：导入mapState

import { mapState } from 'vuex'

第二步：利用延展运算符，采用数组形式引入state属性

 computed: {
...mapState(['count','xxx','xxx'])
}

第三步：将导出的状态映射给计算属性

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

四、vuex基础-mutations
数据快照：一次mutation的执行，立刻得到一种视图状态，因为是立刻，所以必须是同步
1、定义mutations

const store  = new Vuex.Store({
  state: {
    count: 0
  },
  // 定义mutations
  mutations: {
     
  }
})

2、格式说明

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

3、原始形式

<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>

带参数的传递

//在mainjs
  addCount (state, payload) {
    state.count += payload
}

//在组件
this.$store.commit('addCount', 10)

4、辅助函数 - mapMutations
mapMutations和mapState很像，它把位于mutations中的方法提取了出来，我们可以将它导入

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

import { mapMutations } from 'vuex'
methods: {
   ...mapMutations(['addCount'])
}

带参数的传递

<button @click="addCount(100)">+100</button>

但是请注意： Vuex中mutations中要求不能写异步代码，如果有异步的ajax请求，应该放置在actions中

五、vuex基础-actions
state是存放数据的，mutations是同步更新数据，actions则负责进行异步操作
定义actions

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

原始调用 - $store.dispatch

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

传参调用

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

辅助函数 -mapActions
actions也有辅助函数，可以将action导入到组件中

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

直接通过 this.方法就可以调用

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

六、vuex基础-getters
vuex的一种计算属性
定义getters

 getters: {
    // getters函数的第一个参数是 state
    // 必须要有返回值
     filterList:  state =>  state.list.filter(item => item > 5)
  }

原始方式 -$store

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

辅助函数 - mapGetters

computed: {
    ...mapGetters(['filterList'])
}

 <div>{{ filterList }}</div>