创建好nuxt项目后会有一个store文件,创建一个idnex.js就可以使用vuex了,不需要安装vuex。
在这里插入图片描述
接下来对于vuex具体的使用,这里只是一个小demo,如果不符合公司规定,可修改。。

一. 在vuex的基础写法

下面第一张图片的demo在vue项目可使用 ---------但是在Nuxt中不行,第二张图片是Nuxt的正确
在这里插入图片描述
在Nuxt项目中正确写法如下:在这里插入图片描述

如果报错了,就将index.js 重命名其它的名称比如pubulish.js 再试一下

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export const state = () => ({
    searchContent: '',
});
const mutations = {
    changeSearchContent(state, option) {
        console.log(option)
        state.searchContent = option
        console.log(state.searchContent)
    },
};
export default {
    state,
    mutations
};

二. .vue文件中使用vuex

先引入
在这里插入图片描述
在methods中注册
在这里插入图片描述
在一个方法里面可直接this.使用
在这里插入图片描述
三部曲-----简易版小模板–在mutations中传值

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  methods: {
    ...mapMutations(['changeSearchContent']),
    clickSearch() {
      this.changeSearchContent(this.search)
    },
  },
}
</script>

这.vue文件获取state的值,同样是三部,引入,注册,使用。直接上代码

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  computed: {
    ...mapState(['searchContent']),
  },
  mounted(){
      console.log(this.searchContent)
  }

}
</script>

如果还是没会可以进行评论

嗯 就酱~~

Logo

前往低代码交流专区

更多推荐