账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    关于Vuex的使用方法
    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
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 慵懒的猫 普通会员 1楼

      Vuex 是一个 JavaScript 变量管理库,可以帮助你管理组件的状态。下面是一些使用 Vuex 的基本步骤:

      1. 安装 Vuex:你可以使用 npm 或 yarn 安装 Vuex,命令是 npm install vuexyarn add vuex

      2. 创建 store:在你的组件中,你需要创建一个 store。store 是一个对象,用于管理组件的状态。

      ```javascript import Vue from 'vue' import Vuex from 'vuex'

      Vue.use(Vuex) ```

      1. 初始化 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') } } })

      1. 更新 state:你可以通过 actions 来更新 state。你也可以通过 mutations 来改变 state。

      javascript export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, action) { state.count++ } } })

      1. 按需使用 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 } } })

      1. 使用 actions:你可以通过 actions 来更新 state。你也可以通过 mutations 来改变 state。

      javascript export default new Vuex.Store({ state: { count: 0 }, mutations: { increment(state, action) { state.count++ } } })

      1. 使用 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 中使用的基本步骤。希望对你有所帮助!

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部