Nuxt使用Vuex
创建好nuxt项目后会有一个store文件,创建一个idnex.js就可以使用vuex了,不需要安装vuex。接下来对于vuex具体的使用,这里只是一个小demo,如果不符合公司规定,可修改。。一. 在vuex的基础写法下面第一张图片的demo在vue项目可使用 ---------但是在Nuxt中不行,第二张图片是Nuxt的正确在Nuxt项目中正确写法如下:如果报错了,就将index.js重命名其
·
创建好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>
如果还是没会可以进行评论
嗯 就酱~~
更多推荐
已为社区贡献7条内容
所有评论(0)