- 30
- 0
一个很简单的功能,子组件有个计数count,父组件中有+和-按钮控制count计数,以下是代码
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import VueLazyLoad from 'vue-lazyload'
import infiniteScroll from 'vue-infinite-scroll'
import {currency} from './util/currency'
import store from './store'
Vue.config.productionTip = false
Vue.filter("currency",currency);
Vue.use(infiniteScroll)
Vue.use(VueLazyLoad,{
loading:"/static/loading-svg/loading-bars.svg"
})
/* eslint-disable no-new */
new Vue({
el: '#app',
store,
router,
template: '<App/>',
components: { App }
})
store/index.js
import Vue from 'vue'
import Vuex from 'vuex'
import testHeader from './testHead'
Vue.use(Vuex)
export default new Vuex.Store({
testHeader
})
store/testHeader.js
const state = {
count:0
}
const mutations = {
increment (state) {
state.count ++;
},
decrement (state) {
state.count --;
}
}
export default{
state,
mutations
}
VuexTest.vue(父组建)
<template>
<div>
<test-head></test-head>
<a href="javascript:;" class="btn btn--m" @click="increment">+</a>
<a href="javascript:;" class="btn btn--m" @click="decrement">-</a>
</div>
</template>
<script>
import testHead from '@/components/head'
export default {
data () {
return {
}
},
components : {
testHead
},
methods : {
increment () {
this.$store.commit("increment");
},
decrement () {
this.$store.commit("decrement");
}
}
}
</script>
head.vue(子组件)
<template>
<div>
<span>{{count}}</span>
</div>
</template>
<script>
export default {
data () {
return {
}
},
computed:{
count () {
return this.$store.state.count;
}
}
}
</script>
这样写无法获取this.$store.state.count
- 共 0 条
- 全部回答
-
慵懒的猫 普通会员 1楼
Vuex 是一个 JavaScript 变量管理库,可以帮助你管理组件的状态。下面是一些使用 Vuex 的基本步骤:
-
安装 Vuex:你可以使用 npm 或 yarn 安装 Vuex,命令是
npm install vuex或yarn add vuex。 -
创建 store:在你的组件中,你需要创建一个 store。store 是一个对象,用于管理组件的状态。
```javascript import Vue from 'vue' import Vuex from 'vuex'
Vue.use(Vuex) ```
- 初始化 store:在你的 store 中,你需要初始化 state、 mutations 和 actions。state 是组件的状态,mutations 是改变 state 的方法,actions 是改变 state 的方法。
javascript export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++ } }, actions: { incrementAction({ commit }) { commit('increment') } } })- 更新 state:你可以通过 actions 来更新 state。你也可以通过 mutations 来改变 state。
javascript export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, action) { state.count++ } } })- 按需使用 state 和 mutations:你可以通过 getters 来获取 state 和 mutations。 getters 可以返回一个对象,这个对象包含了 state 和 mutations 的所有属性。
javascript export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, action) { state.count++ } }, getters: { getCount(state) { return state.count } } })- 使用 actions:你可以通过 actions 来更新 state。你也可以通过 mutations 来改变 state。
javascript export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, action) { state.count++ } } })- 使用 getters:你可以通过 getters 来获取 state。 getters 可以返回一个对象,这个对象包含了 state 的所有属性。
javascript export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, action) { state.count++ } }, getters: { getCount(state) { return state.count } } })以上就是在 Vuex 中使用的基本步骤。希望对你有所帮助!
-
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
