Nuxt项目整合vuex

精选30+云产品，助力企业轻松上云！>>>

Nuxt项目中使用vuex

vuex官网: https://vuex.vuejs.org/zh/

搭建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文件

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

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

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

2.1 直接使用state中的数据

2.1.1 代码

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

2.1.2 效果

2.2 通过mapState获取state中的数据

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代码

4.2.2 js代码

4.2.3 效果

5. Actions

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

5.1 修改store/index.js

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

使用其它模块

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

1. 创建js文件

2. 修改js文件

/**漫路h */
export const state = () => ({
    username:"游客"
})

export const mutations = {
    updateUsername(state, value) {
      state.username = value
    }
}

3. 创建user.vue

代码

<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 点击登录

4.1.1 登录成功

4.2 点击退出

4.2.1 退出成功