Nuxt项目整合vuex

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 退出成功