vuex

Posted 2021-01-27 houfee

认识vuex

四种属性，八种方法

store（仓库）：每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的状态 (state)。

mutations：修改 state 中的数据，mutations 方法的第一个形参，已经被固定死了，永远都是 state

actions: 主要是提供一些异步操作，来修改 state 中的数据

getter: 定义一个 getters,今后页面上都可以直接输出 这个 getters 对应的值

创建组件

// router文件夹 => index.js 导入Add和Sub， 使用命名路由在页面上添加俩个组件
export default new Router({
  routes: [
    {
      path: ‘/‘,
      name: ‘text‘,
      components: {
        add: Add,
        sub: Sub
      }
    }
  ]
})

// vues文件夹 => index.js 创建全局的数据存储对象
import Vue from ‘vue‘
import Vuex from ‘vuex‘ // 1.导入 vuex

Vue.use(Vuex) // 2.安装Vuex

//3. 创建store公共状态对象 并 暴露出去
export default new Vuex.Store({
  state: {
    count: 0
  }
})

// main.js 文件
import Vue from ‘vue‘
import App from ‘./App‘
import router from ‘./router‘
import store from ‘./vuex‘ // 4.接收vuex
Vue.config.productionTip = false
new Vue({
  el: ‘#app‘,
  router,
  render: h => h(App),
  store // 5.创建的 store 挂载到 vm 实例上
})

在组件中访问store中state上的属性

方法一

{{this.$store.state.数据的名称}}

<template>
  <div>
    <h1>add</h1>
    <div>接受到vuex的值---{{this.$store.state.count}}</div>
  </div>
</template>

方法二----按需导入

• 按需导入 mapState 辅助函数：

import { mapState } from "vuex";

• 创建一个computed属性，通过mapState，结合 ... 展开运算符，把需要的状态映射到组件的计算属性中：

  computed: {
    // 自定义的计算属性 方法1
    newMsg: function () {
      return ‘----‘ + this.msg + ‘------‘
    },
    // 方法2 通过 展开运算符，把 state中的数据映射为计算属性，这样，能够让自己的计算属性和store中的属性并存
    ...mapState([‘count‘, ‘msg‘])
  }

修改store中state上的值

只有 mutations 中提供的方法，有权利修改 state 中的数据

// 与state平级
  mutations: {
    add (state) {
      state.count++
    },
    addN (state, step) {
      // vuex 官方推荐，不要直接在 mutations 中，执行异步操作，去修改state中的数据；否则 会让 调试工具运行紊乱；
      // 如果，涉及到 异步的 去修改 state 中的数据，那么一定要把 异步操作，定义到 actions 节点中；
      /* setTimeout(() => {
        state.count += step
      }, 1000) */
      state.count += step
    },
    // -1 的方法
    sub (state) {
      state.count--
    },
    subN (state, step) {
      state.count -= step
    }
  }

方法一：this.$store.commit()

// Add.vue  
methods: {
    // 点击 +1 按钮，让 count 值自增 +1
    addHandler () {
      // 注意：千万必要在组件中，直接修改 store 中的数据；
      // 因为 容易出现数据修改混乱的问题；
      // this.$store.state.count++
      // 使用 this.$store.commit(‘方法名‘) 方法，来触发 mutations 中提供的方法
      this.$store.commit(‘add‘)
    },
    // 点击 +10 按钮，让 count 值自增 +10
    addHandler10 () {
      this.$store.commit(‘addN‘, 10)
    }
  }

方法二mapMutations

// Sub.vue
<button @click="subN(10)"> -10</button>
// ...
methods: {
    // 使用 mapMutations 把 store 中的mapMutations上的方法，按需映射到组件的 methods 中，供页面去直接调用
    ...mapMutations([‘sub‘, ‘subN‘]),
  }

定义和使用 actions 来提交异步的操作

// 与state平级 

  // actions 主要是提供一些异步操作，来修改 state 中的数据
  actions: {
    // 提供一个 异步自增+1的方法
    addAsync (context) {
      setTimeout(() => {
        context.commit(‘add‘)
      }, 1000)
    },
    // 异步 +N
    addNAsync (context, step) {
      setTimeout(() => {
        context.commit(‘addN‘, step)
      }, 1000)
    },
    // 异步 -1
    subAsync (context) {
      setTimeout(() => {
        context.commit(‘sub‘)
      }, 1000)
    },
    // 异步 -N
    subNAsync (contenxt, step) {
      setTimeout(() => {
        contenxt.commit(‘subN‘, step)
      }, 1000)
    }
  }

方法一

<!-- 异步 --> 
//  add.vue
<button @click="addHandler"> +1 </button>
<button @click="addHandler10()"> +10</button>

  methods: {
    addHandler () {
      this.$store.dispatch(‘addAsync‘)
    },
    addHandler10 () {
      this.$store.dispatch(‘addNAsync‘, 10)
    }
  }

方法二mapActions

// sub.vue  
<button @click="subAsync">异步-1</button>
<button @click="subNAsync(5)">异步-N</button>

//   作用：是把当前组件中，需要访问的数据，从 store 中，映射为当前组件的计算属性
import { mapActions } from ‘vuex‘

methods: {
    ...mapActions([‘subAsync‘, ‘subNAsync‘])
}

getter

 // 与state平级 

 // getters 类似于计算属性
  getters: {
    // 定义一个 getters,今后页面上都可以直接输出 这个 getters 对应的值
    countInfo (state) {
      // getters 有一个非常有用的特性：
      // 只要内部依赖的 state 上的数据，发生了变化，会重新计算 getters 的值
      return ‘当前最新的count值为：‘ + state.count
    }
  }

方法一：

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

方法二：

<h3>{{countInfo}}</h3>

import { mapGetters } from ‘vuex‘

  // 计算属性
  computed: {
    ...mapState([‘count‘]),
    ...mapGetters([‘countInfo‘])
  },