ホームページ >ウェブフロントエンド >jsチュートリアル >vuexの状態オブジェクトの使い方
この記事では、vuex の状態オブジェクトを使用する 5 つの方法を紹介し、私の vuex の構造を掲載します。興味のある友達は、Script House のエディターをフォローして一緒に学ぶことができます
vuex は、vue 用に特別に設計されたツールです。 .js は状態管理モードを設計しており、devtools を使用してデバッグすることもできます。
以下は皆さんに向けた私のvuexの構造です
以下はストアフォルダ配下のstate.jsとindex.jsの内容です
//state.js const state = { headerBgOpacity:0, loginStatus:0, count:66 } export default state //index.js import Vue from 'vue' import Vuex from 'vuex' import state from './state' import actions from './actions' import getters from './getters' import mutations from './mutations' Vue.use(Vuex) export default new Vuex.Store({ state, actions, getters, mutations })
それではtest.vueでvuexを使い始めましょうコンポーネント状態状態オブジェクト
メソッド 1
rreeeメソッド 2
<template> <p class="test"> {{$store.state.count}} <!--第一种方式--> </p> </template> <script type="text/ecmascript-6"> export default{ name:'test', data(){ return{ } } } </script> <style> </style>
メソッド 3
<template> <p class="test"> {{count}} <!--步骤二--> </p> </template> <script type="text/ecmascript-6"> export default{ name:'test', data(){ return{} }, computed:{ count(){ return this.$store.state.count; //步骤一 } } } </script> <style> </style>
方法 4
<template> <p class="test"> {{count}} <!--步骤三--> </p> </template> <script type="text/ecmascript-6"> import {mapState} from 'vuex' //步骤一 export default{ name:'test', data(){ return{} }, computed:mapState({ //步骤二,对象方式 count:state => state.count }) } </script> <style> </style>
方法 5
<template> <p class="test"> {{count}} <!--步骤三--> </p> </template> <script type="text/ecmascript-6"> import {mapState} from 'vuex' //步骤一 export default{ name:'test', data(){ return{} }, computed:mapState([ //步骤二,数组方式 "count" ]) } </script> <style> </style>
以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。
関連する推奨事項:
vue cli に基づいて複数ページのスキャフォールディングを再構築するプロセスの紹介
Vue2 で Typescript を使用する設定の紹介 Vue-cli
Vue は返すコンポーネントを実装しますトップへ戻るトップへ
以上がvuexの状態オブジェクトの使い方の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。