Vuex的入门学习使用

「爱情、让人受尽委屈。」 2022-05-24 13:40 243阅读 0赞

1、vuex是什么：Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

2、学习准备：

1）、[vuex中文官网][vuex]

2）、搭建好vue脚手架，vue init webpack <projectName>   文件名不建议使用‘vuex’，因为创建好脚手架后使用vuex需要进行npm安装。这个时候会检测到你使用的项目名Name为：”vuex“,然后报错，网上有一个这个问题，如果遇到可[移步][Link 1]；

3）、安装vuex：

npm install vuex --save
    yarn add vuex

3、使用：

1）、在vuecli目录下创建一个store目录并新建一个index.js文件。以下是index.js文件内容

import Vue from 'vue';
    import Vuex from 'vuex';
    Vue.use(Vuex);
    const store = new Vuex.Store({
        state:{
           count: 0,
            cityName: "北京",
            todos: [
                { id: 1, text: '...', done: true },
                { id: 2, text: '...', done: false }
            ]  
    }
    })
    export default store

2）、引入存储并注入

在main.js中引入我们刚刚创建的index.js文件：

import store from './store/index.js'

并且注入存储：

new Vue({
        store,
        render: h => h(App)
    }).$mount('#app-box')

3）、使用测试

# State #

在vue页面中进行测试使用，检验是否能获取到store中的参数

在methods中随便写一个方法，进行访问（通过属性访问）

console.log(this.$store.state.cityName);
          console.log(this.$store.state.todos.length);

也可以在computed中直接通过一下进行访问并渲染到页面中

computed: {
        cityName() {
          return this.$store.getters.cityname;
        }
      }

在html中书写：

<span @click="changeCity">{
       {cityName}}</span>

## Getter ##

有时候我们需要从 store 中的 state 中派生出一些状态，例如对列表进行过滤等；我们可以 在 store 中定义“getter”（可以认为是 store 的计算属性）。就像计算属性一样，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。例如：

// vue页面中调用一下方法获取return的值 
        getters: {
            cityname(state) {
                return state.cityName + "市区"
            },
            upperOwner(state) {
                return state.owner.slice(0, 1).toUpperCase() + state.owner.slice(1)
            },
            doneTodos(state) {
                return state.todos.filter(a => a.done == true)   //获取到done为true的元素
            },
            getTodoById: (state) => (id) => {
                return state.todos.filter(a => a.id == id)  //获取到id为指定id的元素
            }

vue页面中调用getters方法的两种方式：

属性访问：

console.log(this.$store.getters.doneTodos);

方法访问(红色字store需要先进行导入：“import store from "../store/index.js";"))：

console.log(store.getters.getTodoById(2))      //获取到id为指定id的元素

## mutation    ##

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。Vuex 中的 mutation 非常类似于事件：每个 mutation 都有一个字符串的 事件类型 (type)和 一个 回调函数 (handler)。这个回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数,并且你可以向 `store.commit` 传入额外的参数，即 mutation 的 载荷（payload）：

如下：

mutations: {
            // 函数参数1  state:state状态
            // 函数参数2  自定义参数
            // 必须是同步函数
            getCityName(state, newVal) {
                state.cityName = newVal
                console.log(state.cityName)
            }
        },

vue页面中 调用  store.commit  方法进行提交mutation

store.commit("getCityName", "北京");

## Action     ##

Action 类似于 mutation，不同在于：

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

actions: {
            // context 上下文 只带当前store对象
            // param  参数
            getCityName(context,param){
                setTimeout(function(){
                    // 修改state  依旧需要提交mutations 才可以改变
                    context.commit('getCityName',param)
                }, 1000);
            }
        }

vue页面中调用：在组件中使用 `this.$store.dispatch('xxx')` 分发 action

setTimeout(() => {
            this.$store.dispatch("getCityName", 'action触发');
          }, 3000);

下面是主要代码：

![70][]![70 1][]

备注：state的mapState辅助函数，getter的mapGetters辅助函数，Mutation的mapMutations辅助函数此处没有，可移步官网查看核心概念对应学习

[vuex]: http://https//vuex.vuejs.org/zh/
[Link 1]: https://segmentfault.com/q/1010000008798473http://
[70]: https://img-blog.csdn.net/2018052816124486?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1Nub3dCZWF0UmFpbg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220524/c39a179c3a934ba6855e881dab158844.png