Vuex
Vuex は、Vue.js 専用に開発された状態管理パターンです。主にデータのやりとりを目的としており、親コンポーネントと子コンポーネントの間で値を渡すのは簡単ですが、兄弟コンポーネント間（兄弟コンポーネントの下に親コンポーネントと子コンポーネントがある）で値を渡すのは非常に面倒で、ページ数も多く、ネストされたレイヤー: 共有状態やデータを維持するために vuex を使用することがあります。
Vuex には 5 つの主要な概念があります。
1. 状態: データ (データに相当) を定義するために使用され、ページ内で定義されたデータを取得するために使用されます。
this.$store.state.变量名
- getters: 計算されたプロパティ (vue で計算されたものと同等)。キャッシュに依存し、キャッシュ内のデータが変更された場合にのみ再計算されます。ゲッターのメソッドは状態オブジェクトをパラメーターとして受け取ります。
如：
state:{
count: 1
},
getters:{
getCount(state) {
return state.count + 1
}
},
次のコマンドを使用してページにアクセスします。
this.$store.getters.getCount
<h2>{
{
this.$store.getters.getCount}}</h2>
mutations: 状態値を変更する唯一の方法です。ページ内で取得できるのは同期操作のみです。
this.$store.commit("方法名")
//可以向 store.commit 传入额外的参数，即 mutation 的 载荷（payload）
store.commit('increment', 10)
// ...
mutations: {
increment (state, n) {
state.count += n
}
}
-
アクション: 状態を直接変更するのではなく、ミューテーションが送信されます。これには非同期操作が含まれる場合があります。
-
モジュール: モジュール、Vuex を使用すると、ストアをモジュールに分割できます。各モジュールには、独自の状態、ゲッター、ミューテーション、アクション、さらにはネストされたモジュールがあります。同じ変数名によって引き起こされるプログラムの問題を回避できます。
const moduleA = {
state: {
},
mutations: {
},
actions: {
},
getters: {
}
}
const moduleB = {
state: {
},
mutations: {
},
actions: {
},
getters: {
}
}
export default new Vuex.Store({
modules: {
a: moduleA,
b: moduleB
}
})
// 在各自的模块内部使用
state.price // 这种使用方式和单个使用方式一样，直接使用就行
//在组件中使用
store.state.a.price // 先找到模块的名字，再去调用属性
store.state.b.price // 先找到模块的名字，再去调用属性
使用：
vuex をインストールします。
npm install --save vuex
vuex を構成する
srcフォルダーの下に新しいstoreフォルダーを追加し、その中にindex.jsファイルを追加します
次に、main.jsのストアファイルの下にindex.jsをインポートします。
// main.js内部对vuex的配置
import store from '@/store/index.js'
new Vue({
el: '#app',
store, // 将store暴露出来
template: '<App></App>',
components: {
App }
});
次に、ストアファイルの下にindex.jsの構成を開始します。
import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex)
export default new Vuex.Store({
state: {
// state 类似 data
//这里面写入数据
},
getters:{
// getters 类似 computed
// 在这里面写个方法
},
mutations:{
// mutations 类似methods
// 写方法对数据做出更改(同步操作)
},
actions:{
// actions 类似methods
// 写方法对数据做出更改(异步操作)
}
})
例:
ストア内の製品の元の価格を定義し、割引価格を計算し、ユーザーが入力した数量と製品の元の価格に基づいて合計価格を計算します。 [1] ストア内のデータが次のとおりであることに同意します
。次の形式で
import Vue from 'vue'; //首先引入vue
import Vuex from 'vuex'; //引入vuex
Vue.use(Vuex)
export default new Vuex.Store({
state: {
price: 100, // 原价
total: '', // 总价
},
getters:{
// 折扣价
discount(state, getters) {
return state.price*0.8
}
},
mutations:{
// 计算总价：第一个参数为默认参数state, 后面的参数为页面操作传过来的参数
getTotal(state, n) {
return state.total = state.price * n;
}
},
actions:{
// 这里主要是操作异步操作的，使用起来几乎和mutations方法一模一样
// 除了一个是同步操作，一个是异步操作，一个使用commit调用，一个使用dispatch调用
// 这里就不多介绍了，有兴趣的可以自己去试一试，
// 比如你可以用setTimeout去尝试一下
}
})
【2】ストア内のデータをページ内で利用する
```javascript
<template>
<div>
<p>原价：{
{
price}}</p>
<p>8折：{
{
discount}}</p>
<p>数量：<input type="text" v-model="quantity"></p>
<p>总价：{
{
total}}</p>
<button @click="getTotal">计算总价</button>
</div>
</template>
<script>
export default {
data() {
return {
quantity: 0,
}
},
computed: {
price() {
return this.$store.state.price
},
discount() {
return this.$store.getters.discount
},
total() {
return this.$store.state.total
}
},
mounted() {
},
methods: {
getTotal() {
this.$store.commit('getTotal', this.quantity)
}
},
}
</script>
[3] ページ効果
アプリケーションシナリオの別の例を示します:
たとえば、ログインページでは、携帯電話番号の認証コードまたは携帯電話番号のパスワードでログインできますが、切り替えるときに、入力した携帯電話番号はそのままにしておいてください。この時点では vuex を使用できます。
ページ更新データ損失の問題:
vuex が保存するデータはグローバル共有データとして実行メモリに保存されます。ページが更新されると vue インスタンスが再ロードされ、vuex 内のデータが再初期化されるため、データが失われます。
どうやって対処すればいいのでしょうか？
vuexのデータ変更メソッドでブラウザのキャッシュ(sessionStorage、localStorage、cookie)にデータを直接保存し、ページに入る際にwindow.localStorage.setItem(“list”, jsONを通して初期化フック関数にデータを渡します)。 stringify (s.menuList)) はキャッシュに配置され、JSON.parse(window.localStorage.getItem(“list”)))) を使用してページ上のキャッシュからそれを取得します。ページが離れると、キャッシュに格納されているデータは破棄フック関数で破棄されます。
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store（{
state: {
orderList: [],
menuList: []
},
mutations: {
orderList(s, d) {
s.orderList= d;
window.localStorage.setItem("list",jsON.stringify(s.orderList))
},
menuList(s, d) {
s.menuList = d;
window.localStorage.setItem("list",jsON.stringify(s.menuList))
},
}
}）
ローカル ストレージから取得し、ページの読み込み時に vuex に割り当てます
if (window.localStorage.getItem("list") ) {
this.$store.replaceState(Object.assign({
},
this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
}