Nuxt使用Vuex

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

一. 在vuex的基础写法

下面第一张图片的demo在vue项目可使用 ---------但是在Nuxt中不行,第二张图片是Nuxt的正确
Nuxt使用Vuex_第2张图片
在Nuxt项目中正确写法如下:Nuxt使用Vuex_第3张图片

如果报错了,就将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

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


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


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

嗯 就酱~~

你可能感兴趣的:(Nuxt,vue.js)