1. vuex の概要
1. 概要
vuex は、コンポーネントが依存する共有データを一元管理するツールを使用しており、異なるコンポーネント間のデータ共有の問題を解決できます。
vuex 公式 Web サイト:スタート | Vuex
2. 5 つの主要な属性:
状態 (共有状態データの保存)
ミューテーション (データの変更 -同期コードのみ実行可能)
アクション (非同期操作の実行、データは変更のためにミューテーションに送信されます)
ゲッター (計算された状態の属性)
モデル (モジュール化)
2. プロジェクトに vuex をインストールして構成する
1. 新しい足場プロジェクトを作成し、プロジェクトに vuex を適用します
vue create demo2.vuexをインストールする
npm i vuex --save以下のエラーが発生した場合は、バージョンに問題があることを意味します
ターミナルに次のコマンドを入力して Enter キーを押します: npm install --save [email protected]
3. main.jsに以下のように設定
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(vuex)
const store = new Vuex.Store({})
new Vue({
el: '#app',
store
})3. 5 つの属性の定義と使用
①状態の定義と使い方
1. 状態データの定義
const store = new Vuex.Store({
state: {
count: 1,//定义state数据
},
})2. 状態データを使用する
方法 1: 生の形式 - 補間式$store.state.xx
<div>原始形式获取state:{
{ $store.state.count }}</div>方法 2: 計算されたプロパティ - 計算されたプロパティで状態プロパティを定義します。
<div>计算属性获取state:{
{ count }}</div> computed: {
count () {
return this.$store.state.count
}
}方法 3: ヘルパー関数 - MapState
<div>辅助函数获取state:{
{ count }}</div>//第一步：导入mapState
import { mapState } from 'vuex'
//第二步：利用延展运算符将导出的状态映射给计算属性
computed: {
...mapState(['count'])
}②突然変異の定義と使用
1. 突然変異を定義する
const store = new Vuex.Store({
mutations: {
//不带参
addCount1 (state) {
state.count += 1
},
//带参数
addCount2 (state, payload) {
state.count += payload //payload为调用方法传过来的参数
}
}
})2. 突然変異メソッドを使用する
方法 1: 元の形式 - $store
this.$store.commit('突然変異で定義されたメソッド名'),
this.$store.commit('突然変異で定義されたメソッド名', パラメータ)
<button @click="addFn1">原始方式调用mutations方法-不带参</button>
<button @click="addFn2">原始方式调用mutations方法-带参数</button> methods: {
addFn1() {
this.$store.commit("addCount1");//不带参数
},
addFn2() {
this.$store.commit("addCount2", 2);//带参数
},
},方法 2: ヘルパー関数 - mapMutations
<button @click="addCount1">+1</button>import { mapMutations } from 'vuex'
methods: {
...mapMutations(['addCount1'])
}
③アクションの定義と使い方
1. アクションを定義する
const store = new Vuex.Store({
actions: {
// 不带参数,context等同于this.$store
getAsyncCount1 (context) {
setTimeout(function () {
context.commit('addCount1')
}, 1000)
},
// 带参数,context等同于this.$store,params代表调用方法传过来的参数
getAsyncCount2 (context, params) {
setTimeout(function () {
context.commit('addCount2', params)
}, 1000)
}
}
})2. アクションメソッドを使用する
方法 1: 元の呼び出し - $store
<button @click="addAsyncFn1">原始方式调用actions方法-不带参</button>
<button @click="addAsyncFn2">原始方式调用actions方法-带参数</button>methods: {
addAsyncFn1(){
this.$store.dispatch("getAsyncCount1")//不带参数
},
addAsyncFn2(){
this.$store.dispatch("getAsyncCount2",2)//带参数
}
},
方法 2: 補助関数のマップアクション
<button @click="getAsyncCount2(2)">辅助函数调用actions方法</button>import { mapActions } from 'vuex'
methods: {
...mapActions(['getAsyncCount2'])
}注: ここでは、呼び出されるミューテーションにパラメーターを必要とするメソッドを示します。
④ゲッターの定義と使い方
1. ゲッターを定義する
const store = new Vuex.Store({
state: {
list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
},
getters: {
// filterList: function (state) {
// return state.list.filter(item => item > 2)
// }
filterList: state => state.list.filter(item => item > 2)//简写
}
})2.ゲッターデータを使用する
方法 1: 元のメソッド $store
<div>原始形式获取getters:{
{ $store.getters.filterList }}</div>方法 2: ヘルパー関数 - MapGetters
<div>辅助函数获取getters:{
{ filterList }}</div>import { mapGetters } from "vuex";
computed: {
...mapGetters(['filterList'])
}⑤ モジュールの定義と使用方法
1. モジュール module の定義
const store = new Vuex.Store({
modules:{
user:{
state:{
token:"12345"
}
},
setting:{
state:{
website:"https://www.baidu.com/"
}
}
}
})2. Module モジュール内のデータを使用する
<div>用户token: {
{ $store.state.user.token }}</div>
<div>网站地址: {
{ $store.state.setting.website }}</div>このときサブモジュールの状態を取得するには$store経由で取得する必要があります。 state模块名称属性名
3.上記の書き込み方法を最適化する
ステップ 1: 最も外側のゲッターに次を記述します。
getters: {
token: state => state.user.token,
website: state => state.setting.website
},ステップ2：
<div>token:{
{token}}</div>
<div>website:{
{website}}</div>import { mapGetters } from "vuex";
computed: {
...mapGetters(["token","website"])
},