点这里进入我的个人博客

Nuxt+Vuex初体验

小呀嘛小二郎,背着书包上学堂。。。

今天一个困扰了我一周时间的问题终于被我解决了,值得庆祝

在Nuxt中使用Vuex实现数据存储

 首先:

在store目录下新建一个index.js文件

需要有两个组件(index || demo)[组件名自定]

 

一、在store目录下新建一个index.js文件

index.js内容如下

  1. //定义数据
  2. export const state = () => ({
  3. count: 1 //定义count初始值为1
  4. })
  5. //定义方法
  6. export const mutations = {
  7. inc (state) {
  8. state.count++
  9. },
  10. deinc(state){
  11. state.count--
  12. }
  13. }

二、需要有两个组件

 index.vue内容如下:

  1. <template>
  2. <div>
  3. <h1>{{ count }}</h1> <!--count是计算属性中的count-->
  4. <button @click="inc">增加</button>
  5. <NuxtLink to="/demo">Demo</NuxtLink>
  6. </div>
  7. </template>
  8. <script>
  9. //使用解构赋值从vuex中引入需要的state,也可以引入mapMutations...
  10. import { mapState } from "vuex";
  11. export default {
  12. computed: mapState(["count"]),//计算属性,count是在store中的index.js中定义的state
  13. methods: {
  14. inc() {
  15. this.$store.commit("inc");//触发store中的index.js中定义的mutations中的inc方法
  16. }
  17. }
  18. };
  19. </script>

demo.vue内容如下:

  1. <template>
  2. <div>
  3. <h1>{{ $store.state.count }}</h1> <!--取出store中state的count-->
  4. <button @click="deinc">减少</button>
  5. <NuxtLink to="/">Home</NuxtLink>
  6. </div>
  7. </template>
  8. <script>
  9. export default {
  10. methods:{
  11. deinc:function () {
  12. this.$store.commit('deinc') //触发store中mutations中的deinc方法
  13. }
  14. }
  15. }
  16. </script>

三、最终效果如下


 这个东西我竟然研究了一星期,可笑。。。

注意:所有的路由跳转均采用,切忌使用血的教训。。。

posted @ 2019-12-22 17:02  xueshuai  阅读(405)  评论(0编辑  收藏  举报