vuex的详细使用方式(一)2.0

一.VueX的基本使用

VueX 的详细文档说明：

第一步：

在编辑器 或者在 PowerShell中输入 命令下载安装：

  npm install vuex --save

第二步：

在一个模块化的打包系统中，必须显式地通过 Vue.use() 来安装 Vuex：
单独的在src 文件夹中创建一个 store 文件夹，里面写一个index.js 文件

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

第三步：

Vuex 之后，让我们来创建一个 store。创建过程直截了当——仅需要提供一个初始 state 对象和一些 mutation：

这个操作都是在 store 文件夹的index.js中完成的

/*
 * @Descripttion: your project
 * @version: 1.0
 * @Author: Mr.HZC
 * @Date: 2021-05-22 14:37:50
 * @LastEditors: Aidam_Bo
 * @LastEditTime: 2021-05-22 15:24:50
 */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 100
  },
  mutations: {
    // 这个地方的方法是你在组件内定义的 commit 提交过来的一个方法
    // 第一个参数就是vuex中的 state数据
    // 第二个参数是你从子组件传递过来的采纳数
    // increment (state, val) {
    //  state.count += val
    // }
    
    // 对象的方式来接收commit提交过来的方法
     increment(state,playload) {
        state.count = playload.num
     }
  }
})

export default store;

第四步：

具体的使用方式如以下代码：
在component 或者 view 中创建2个.vue 文件

foo组件

bar组件

在App.vue父组件引入上面注册的组件

实际截图：

image.png

PS：

state：用来存储共享的数据
mutations：用来改变state中的数据

二. VueX的state 和 mapState函数 https://vuex.vuejs.org/zh/guide/state.html

mapState 辅助函数的基本使用：

第一步：

在当前需要的组件内引入mapState，比如你创建了一个aaa.vue
import { mapState } from "vuex"

具体代码如下：

aaa.vue组件的使用：

bbb.vue组件的使用：

实际代码截图如下：

image.png

getter的基本使用 和mapGetters辅助函数的使用：https://vuex.vuejs.org/zh/guide/getters.html

Vuex 允许我们在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，
getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

当每次在各个页面去计算状态值或者去修改单价的话 那种太麻烦了，你只需要在当前的 vuex页面的getter计算属性中去计算完成

然后去你需要的页面 的 computed计算属性或者方法中去 使用mapGetters辅助函数就可以了

具体代码如下：

store ==> index.js文件

/*
 * @Descripttion: your project
 * @version: 1.0
 * @Author: Mr.HZC
 * @Date: 2021-05-22 14:37:50
 * @LastEditors: Aidam_Bo
 * @LastEditTime: 2021-05-22 18:03:22
 */
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 100,
    message: "我是胡振楚",
    todos: [
      { id: 1, text: "吃饭", done: true },
      { id: 2, text: "睡觉", done: false },
      { id: 3, text: "打豆豆", done: false },
      { id: 4, text: "写代码", done: false },
    ]
  },
  mutations: {
    // 这个地方的方法是你在组件内定义的 commit 提交过来的一个方法
    // 第一个参数就是vuex中的 state数据
    // 第二个参数是你从子组件传递过来的采纳数
    increment (state, val) {
      state.count += val
    }
  },

  getters: {
    remaining: state => {
      console.log(state);
      return state.todos.filter(item => item.done === false).length
    }，
     getTodoById: state => {
      return id => {
        return state.todos.find(item => item.id === id)
      }
    }
  }
})

export default store;

ccc.vue 页面

ddd.vue 页面

ps: mapGetters辅助函数的使用：

实际代码截图如下：

image.png

Mutation的提交方式及参数传递

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

Mutation 需遵守 Vue 的响应规则
既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：

1.最好提前在你的 store 中初始化好所有所需属性。

2.当需要在对象上添加新属性时，你应该

-- 使用 Vue.set(obj, 'newProp', 123), 或者

-- 以新对象替换老对象。例如，利用对象展开运算符 (opens new window)我们可以这样写：

state.obj = { ...state.obj, newProp: 123 }

在组件中提交 Mutation

你可以在组件中使用 this.$store.commit('xxx') 提交 mutation，或者使用 mapMutations 辅助函数将组件中的 methods 映射为 store.commit 调用（需要在根节点注入 store）。
在当前的组件中另外的一种mutations的提交

import { mapMutations } from 'vuex'

export default {
  // ...
  methods: {
    ...mapMutations([
      'increment', // 将 `this.increment()` 映射为 `this.$store.commit('increment')`

      // `mapMutations` 也支持载荷：
      'incrementBy' // 将 `this.incrementBy(amount)` 映射为 `this.$store.commit('incrementBy', amount)`
    ]),
    ...mapMutations({
      add: 'increment' // 将 `this.add()` 映射为 `this.$store.commit('increment')`
    })
  }
}

使用常量替代 Mutation 事件类型

使用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然：

具体代码截图如下：

image.png

action 异步 actions 的基本使用：

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

/*
 * @Descripttion: your project
 * @version: 1.0
 * @Author: Mr.HZC
 * @Date: 2021-05-22 14:37:50
 * @LastEditors: Aidam_Bo
 * @LastEditTime: 2021-05-22 20:21:19
 */
import Vue from 'vue'
import Vuex from 'vuex'

// 导入INCREMENT常量
import { SOME_MUTATION } from "./mutation-types"


Vue.use(Vuex)
const store = new Vuex.Store({
  state: {
    count: 100,
    message: "我是胡振楚",
    todos: [
      { id: 1, text: "吃饭", done: true },
      { id: 2, text: "睡觉", done: false },
      { id: 3, text: "打豆豆", done: false },
      { id: 4, text: "写代码", done: false },
    ]
  },
  mutations: {
    // 这个地方的方法是你在组件内定义的 commit 提交过来的一个方法
    // 第一个参数就是vuex中的 state数据
    // 第二个参数是你从子组件传递过来的采纳数
    increment (state, { num = 1 }) {
      state.count += num
    },

    // SOME_MUTATION 的具体使用：
    [SOME_MUTATION] (state) {
      state.message = "你好，世界!"
    }
  },

  getters: {
    remaining: state => {
      console.log(state);
      return state.todos.filter(item => item.done === false).length
    },

    getTodoById: state => {
      return id => {
        return state.todos.find(item => item.id === id)
      }
    }
  },
  actions: {
    increment ({ commit }, { num = 1 }) {
      setTimeout(function () {
        commit({
          type: "increment",
          num
        })
      }, 1000)
    }
  }
})

export default store;

eee.vue

实际代码截图如下：

image.png