vuex基础

Nobita
137 阅读3分钟

vuex基础

一、什么是vuex，vuex产生的原因？

1.vuex是什么？

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

2.vuex产生的原因？

现代的web开发辅助多变的需求驱动下，组件化开发已成为标准，实际情况下的组件都不是独立存在的，而是互相协作共同构成了一个复杂的业务功能。而组件之间的通信成为了必不可少的开发需求（父=>子、子=>父、兄弟=>兄弟、孙=>爷等）。因此，vuex的存在是为了解决不同组件数据共享的问题。

3.补充组件化和模块化的区别
1、组件相当于库，把一些能在项目里或者不同类型项目中可复用的代码进行工具性的封装。
2、模块相应于业务逻辑模块，把同一类型项目里的功能逻辑进行进行需求性的封装。

二、vuex的使用

1.vuex初始化功能

（1）下载

npm i vuex@3
注意：vuex必须下载3这个版本

（2）引入（main.js文件中）

import Vuex from "vuex"

（3）注册（main.js文件中）

Vue.use(Vuex)

（4）实例化vuex（main.js文件中）

const store = new Vuex.Store({
    // 写配置 如 state、mutations、actions、getters
})

（5）挂载（main.js文件中）

new Vue({
    store, // 挂载
    router,
    render:h=>h(App)
}).$mount('#app')

三、配置实例化vuex

1.概念一：state？
（1）state是什么

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

（2）定义state
const store = new Vuex.Store({
    state:{
        //管理数据
        a:0，
        count:0
    }
})
（3）使用state

组件中可以使用，this.$store获取到store对象实例，可通过state属性获取count

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

c57f03123d64c73d8d49711986bfa46b.png

(4）state定义在计算属性中写法(优化使用:因为代码量比较多，写法上比较长。)
computed:{
    count(){
        return this.$store.state.count
    }
}

8edc83f228dd3f3c5b557c96c21c3085.png

(5)辅助函数的作用mapState

作用：简化state变量的使用（比上一步的优化使用更加加简单）

//引入
import {mapState} from "vuex"

computed:{
    count(){
        return this.$store.state.count
    },
    ...mapState(["count"])
}

image-20220604160114099-16543296750644.png

2.概念二：mutations
（1）mutations是什么？

state数据的修改只能通过mutations，并且必须是同步更新(也就是里面不能有异步代码)，目的是形成数据快照。（专门用来修改state中的变量的对象(属性)。）

（2）定义mutations

mutations是一个对象，对象中存放修改state的方法,调用mutations中的函数 必须通过commit方法进行调用

语法 $store.commit("需要调用的函数"，传给调用函数的值)

// main.js文件实例化配置
mutations:{
    //自定义函数修改count值
    addCount(state,payload){
        state.count+=payload // 通常用payload作为参数传入
    }
}

<template>
   <h1>渲染vuex中的count变量：{{ $store.state.count }}</h1>
   <h1>渲染vuex中的count变量：{{ count }}</h1>
   <button @click="$store.commit('addCount',3)">点击更新count值</button>
</template>
（3）自定义函数优化使用
<template>
   <h1>渲染vuex中的count变量：{{ myCount }}</h1>
    <button @click="$store.commit('addCount', 3)">点击count值</button>
    <button @click="changeCount(2)">点击count值</button>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  computed: {
    myCount() {
      return this.$store.state.count + 1;
     },
  },
  methods: {
    changeCount(num) {
      this.$store.commit("addCount", num);
    },
  },
};
</script>
（4）辅助函数的作用mapMutations

image-20220604170129002-16543332900917.png

3.概念三：actions
（1）actions是什么？

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

（2）定义actions

actions 是一个对象，对象中存放着方法

image-20220604172220116-16543345412358.png

actions:{
    getAsyncCount(store,num){
        // store内置参数，指的是vuex.store实例化对象
        // 需求 异步一秒后更新count值
        setTimeoit(()=>{
            store.commit("addCount",num)
        },1000)
    }
}

<template>
  <div>
    <h1>state内count的值：{{ $store.state.count }}</h1>
    <button @click="$store.dispatch('getAsyncCount', 1)">点击修改count</button>
    <button @click="changeCount(4)">点击修改count</button>
    <button @click="getAsyncCount(5)">点击修改count</button>
  </div>
</template>

<script>
// 引入
import { mapActions } from "vuex";
export default {
  methods: {
    changeCount(num) {
      this.$store.dispatch("getAsyncCount", num);
        }
     ...mapActions(["getAsyncCount"]),
  },
};
</script>
（3）优化使用actions
<template>
  <div>
    <h1>state内count的值：{{ $store.state.count }}</h1>
    <button @click="changeCount(4)">点击修改count</button>
  </div>
</template>

<script>
export default {
  methods: {
    changeCount(num) {
      this.$store.dispatch("getAsyncCount", num);
        }
  },
};
</script>
（4）辅助函数的作用actions
<template>
  <div>
    <h1>state内count的值：{{ $store.state.count }}</h1>
    <button @click="getAsyncCount(5)">点击修改count</button>
  </div>
</template>

<script>
// 引入
import { mapActions } from "vuex";
export default {
  methods: {
     ...mapActions(["getAsyncCount"]),
  },
};
</script>
4.概念四：getters
（1）getters是什么？

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

（2）定义getters
state: {
  a: 123,
  count: 0,
  list: [1, 2, 3, 4, 5, 6, 7, 8, 9],
},
getters: {
  // 声明变量，值是一个函数，这个函数必须要有个返回值
  //需求 页面中需要用到的state的list数组大于5
  filterList: (state) => {
    return state.list.filter((item) => item > 5);
  },
},

image-20220604180936892-165433737799111.png

（3）优化使用
computed: {
    filterListFn() {
      return this.$store.getters.filterList;
    },
  },
（4）辅助函数的作用
<template>
  <div>
    <h1>{{filterList}}</h1>
  </div>
</template>

<script>
    import {mapGetters} from "vuex"
export default {
    computed:{
        ...mapGetters({filrerList})
    }
};
</script>

<style></style>

1654393929960.png

（5）应用场景

1654394989841.png

5.概念五：modules
（1）modules是什么？

由于使用单一状态树，应用的所有状态会集中到一个比较大的对象 state 当中。当应用变得非常复杂时，就有可能变得相当臃肿。Vuex会变得越来越难以维护, 由此，又有了Vuex的模块化

（2）定义modules
  modules: {
    user: {
      state: { token: "123456" },
      mutations: {},
      actions: {},
      getters: {},
    },
    setting: {
      state: { name: "9527" },
      mutations: {},
      actions: {},
      getters: {},
    },
  },

<template>
  <div>
    <h1>获取user模块中的token：{{ $store.state.user.token }}</h1>
    <h1>获取setting模块中的name：{{ $store.state.setting.name }}</h1>
  </div>
</template>
（3）简化modules
// getters写法
  getters: {
    token: (state) => state.user.token,
    name: (state) => state.setting.name,
  },

1654396848085.png

（4）模块化的空间命名

模块内部的 action、mutation 和 getter 是注册在全局命名空间的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

这句话的意思是 刚才的user模块还是setting模块，它的 action、mutation 和 getter 其实并没有区分，都可以直接通过全局的方式调用

1654397739324.png

1654397778327.png

（5）命名空间

默认情况下每个模块中的mutations、actions、getters，声明变量或者函数都是全局空间的，因此不具备封闭性，如果想要让每个模块都具有独立命名空间，则需要给模块添加namespaced属性，且设置为true。

语法：

<!-- 具有读了的命名空间user模块，访问必须加模块名 -->
<!-- 语法：store.commit('模块名/updateToken') -->
<!-- 语法：store.dispatch('模块名/aysncChangeToken') -->
<button @click="$store.commit('user/updateToken')">点击</button>
<button @click="$store.dispatch('user/aysncChangeToken')">点击</buton>

1654398923678.png

（6）通过辅助函数把user模块中的updataToken函数结构到methods中，再使用

1654400394692.png

（7）store的封装使用

1654428584578.png

avatar
文章
阅读
粉丝