Nuxt项目整合vuex

左手的ㄟ右手 2023-02-24 11:11 163阅读 0赞

[精选30+云产品，助力企业轻松上云！>>> ![hot3.png][]][30_ _hot3.png]

# Nuxt项目中使用vuex #

vuex官网: [https://vuex.vuejs.org/zh/][https_vuex.vuejs.org_zh]

搭建Nuxt项目看这个博客: [带你从不懂到搭建第一个Nuxt项目][Nuxt]

*  Nuxt.js 内置引用了 vuex 模块，所以不需要额外安装。
 *  Nuxt.js 会尝试找到应用根目录下的 store 目录，如果该目录存在，它将做以下的事情：
    
     *  引用 vuex 模块
     *  将 vuex 模块 加到 vendors 构建配置中去
     *  设置 Vue 根实例的 store 配置项
 *  Nuxt.js支持两种store的使用方式
    
     *  普通方式: store/index.js, 返回一个vuex.sotre实例
     *  模块方式: store目录下的所有.js文件会被转换成为状态树指定命名的子模块 （index 是根模块）

## 1. 在store目录下创建index.js文件 ##

![up-ef0d588dbb1f90767a02f92522f62a156a0.png][]

## 2. State: 在index.js中编写state区域 ##

vuex中的数据源，我们需要保存的数据就保存在这里，可以在页面通过  this.$store.state.变量名   来获取我们定义的数据；

![up-00d611b1f5932bec9374cb9120aeb84806a.png][]

/**漫路h */
    export const state = () => ({
        count:1
    })

### 2.1 直接使用state中的数据 ###

#### 2.1.1 代码 ####

随便一个页面,通过this.$store.state.变量名即可获取到数据

![up-10c5006950428a3f1c3289001944dacd86a.png][]

#### 2.1.2 效果 ####

![up-ed2d1a99d3493f4fe3673b8c21492dd9e56.png][]

### 2.2 通过mapState获取state中的数据 ###

![up-ced0ae76c409d7d14d1f5f03313b8481c43.png][]

## 3. Getters ##

Getter相当于vue中的computed计算属性，getter 的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算，这里我们可以通过定义vuex的Getter来获取，Getters 可以用于监听、state中的值的变化，返回计算后的结果

### 3.1 修改store/index.js ###

/*const getters = {     //getters相当于是state的计算属性，如果你需要将变量的值进行计算，然后输出，写这里
    include: (state) => (val) => {
    return state.count==1;
    }

## 4. Mutations ##

数据我们在页面是获取到了，但是如果我们需要修改count值怎么办？如果需要修改store中的值唯一的方法就是提交mutation来修改

### 4.1 向store/index.js添加如下代码 ###

/**漫路h  */
    export const mutations = {
        updateCount(state, value) {
          state.count = value
        }
    }

### 4.2 Mutations使用 ###

#### 4.2.1 html代码 ####

![up-36d3eb9f846894ce090b4cb9785c9f4b9ce.png][]

#### 4.2.2 js代码 ####

![up-af48b3e23bfeaf05dc19d071729431eb5e3.png][]

#### 4.2.3 效果 ####

![up-efeca50a03443222286eb9bb313dbeed59f.png][]

## 5. Actions ##

//actions提交的是mutations，相当于就是改变变量的方法的重写，但是，actions是可以进行异步操作的

### 5.1 修改store/index.js ###

/*const actions = {
    async updateCount({state, commit}, val) {
    commit('updateCount', val);
    }
    };*/

# 使用其它模块 #

**文件中的代码都是一样的,只是使用的时候有一点不同, 看下面代码演示就可以了**

## 1. 创建js文件 ##

![up-8ed781b47dfcf627b6fb2d2c3afbdd3f65b.png][]

## 2. 修改js文件 ##

![up-5761bc41dad4736974758d35c38e3456cca.png][]

/**漫路h */
    export const state = () => ({
        username:"游客"
    })
    
    export const mutations = {
        updateUsername(state, value) {
          state.username = value
        }
    }

## 3. 创建user.vue ##

![up-072e630891b62e6f3ce480b7dfc057a2477.png][]

## 代码 ##

<template>
      <div>
        用户: {
        {username}}
        <input v-if="username=='游客'" type="button" value="登陆" @click="updateUsername('漫路')" />
        <input v-if="username!='游客'" type="button" value="退出" @click="updateUsername('游客')" />
      </div>
    </template>
    
    <script>
    import { mapState,mapMutations } from 'vuex'
    export default {
      computed: {
        username () {
          return this.$store.state.user.username
        }
      },
      methods: {
          /**漫路h */
        ...mapMutations({
          updateUsername: 'user/updateUsername'
        })
      },
    }
    </script>
    
    <style>
    </style>

**访问路径: localhost:3000/user**

## 4. 效果 ##

### 4.1 点击登录 ###

![up-81b3fd5a8543853e54e2e36e6ac30335c8d.png][]

#### 4.1.1 登录成功 ####

![up-83f8efda8e28e4a871fa66683aac6baa43b.png][]

### 4.2 点击退出 ###

![up-343b5be68e47f7a252136bcd13919c732a4.png][]

#### 4.2.1 退出成功 ####

![up-0324ae10d611ab13c38ac9f0ed21d73f5e7.png][]

[hot3.png]: /images/20230209/c14c7a42bc164c219849a8eba34d601b.png
[30_ _hot3.png]: https://www.oschina.net/action/visit/ad?id=1221
[https_vuex.vuejs.org_zh]: https://vuex.vuejs.org/zh/
[Nuxt]: https://my.oschina.net/u/4284277/blog/3195256
[up-ef0d588dbb1f90767a02f92522f62a156a0.png]: /images/20230209/9c5371b0e9084bb18f6a185926cce7f2.png
[up-00d611b1f5932bec9374cb9120aeb84806a.png]: /images/20230209/abaa08008f914bc2a5989091c11bc692.png
[up-10c5006950428a3f1c3289001944dacd86a.png]: /images/20230209/b59859fb848d4223b6c5ff674f85a6e7.png
[up-ed2d1a99d3493f4fe3673b8c21492dd9e56.png]: /images/20230209/0082decaa8fe4b0facd80d35aa435c46.png
[up-ced0ae76c409d7d14d1f5f03313b8481c43.png]: https://oscimg.oschina.net/oscnet/up-ced0ae76c409d7d14d1f5f03313b8481c43.png
[up-36d3eb9f846894ce090b4cb9785c9f4b9ce.png]: https://oscimg.oschina.net/oscnet/up-36d3eb9f846894ce090b4cb9785c9f4b9ce.png
[up-af48b3e23bfeaf05dc19d071729431eb5e3.png]: https://oscimg.oschina.net/oscnet/up-af48b3e23bfeaf05dc19d071729431eb5e3.png
[up-efeca50a03443222286eb9bb313dbeed59f.png]: https://oscimg.oschina.net/oscnet/up-efeca50a03443222286eb9bb313dbeed59f.png
[up-8ed781b47dfcf627b6fb2d2c3afbdd3f65b.png]: https://oscimg.oschina.net/oscnet/up-8ed781b47dfcf627b6fb2d2c3afbdd3f65b.png
[up-5761bc41dad4736974758d35c38e3456cca.png]: https://oscimg.oschina.net/oscnet/up-5761bc41dad4736974758d35c38e3456cca.png
[up-072e630891b62e6f3ce480b7dfc057a2477.png]: https://oscimg.oschina.net/oscnet/up-072e630891b62e6f3ce480b7dfc057a2477.png
[up-81b3fd5a8543853e54e2e36e6ac30335c8d.png]: https://oscimg.oschina.net/oscnet/up-81b3fd5a8543853e54e2e36e6ac30335c8d.png
[up-83f8efda8e28e4a871fa66683aac6baa43b.png]: https://oscimg.oschina.net/oscnet/up-83f8efda8e28e4a871fa66683aac6baa43b.png
[up-343b5be68e47f7a252136bcd13919c732a4.png]: https://oscimg.oschina.net/oscnet/up-343b5be68e47f7a252136bcd13919c732a4.png
[up-0324ae10d611ab13c38ac9f0ed21d73f5e7.png]: https://oscimg.oschina.net/oscnet/up-0324ae10d611ab13c38ac9f0ed21d73f5e7.png