保存する理由: ウェアハウスの複数のコンポーネントがデータを共有できる
コアAPI
-
使用状態: this.$store.state.xxxx
-
補助関数マップ内: this.$store.state.module name.xxxx
-
各コンポーネントは $store を取得できます
-
-
計算されたプロパティ: this.$store.getters.xxx
-
this.$store.commit("同期メソッド名", パラメータ)
-
同期メソッドを呼び出してストア内のデータを変更します
-
-
this.$store.dispatch("非同期メソッド名", パラメータ)
-
非同期メソッドの呼び出し、非同期コードの実行
-
1. vuex をダウンロードし、設定されたストアを main.js に適用します
1.下载vuex
npm i vuex
2.实例化store
export default createStore({ })
3.应用store
import store from './store'
app.use(store)
2. ウェアハウスをインスタンス化する: ストアストレージフォルダーの下のindex.jsでウェアハウスをインスタンス化します。
合計6つのコアコンセプト
3. プラグインのインストール (vuex を更新するとデータ損失が発生するため): 永続ストレージ プラグイン ソリューション
可持久化存储，插件：安装：（因为刷新vuex会数据丢失）
npm install vuex-persistedstate --save
日志打印：vuex自带createLogger
这个插件不用装，查看是否存储成功，会自动打印到 控制台import { createStore,createLogger } from 'vuex'
import createPersistedState from "vuex-persistedstate";
//实例化仓库
export default createStore({
state:{ //负责存储数据
userinfo:{}
},
getters:{ //定义计算方法( 类似组件中的计算属性, 每个计算方法必须有返回值 )
},
mutations:{ //定义同步方法( 可以直接修改state中的数据 )
save_userinfo( state, payload ){
state.userinfo = payload;
}
},
actions:{ //定义异步方法( 内部可以执行异步代码, 但是不能直接修改state中的数据 )
},
modules:{ //模块化管理state中的数据
},
plugins:[ //配合其他插件管理state中的数据
createLogger(),//日志打印
createPersistedState(),//持久化存储
]
})
4.使用する
methods:{
onClickLeft(){
this.$router.go(-1);
},
async onSubmit(values){
//发起 登陆请求
var res = await service.user_login( values );
if( res.data.code == 200 ){
//存储用户的信息,token
this.$store.commit('save_userinfo',res.data.data)
//跳转到首页
this.$router.push('/index');
}
}
}5. メソッド: 同期メソッドを使用します。
6. アクション: 非同期メソッドを定義します: (非同期コードは内部で実行できますが、状態内のデータを直接変更することはできません)
非同期メソッドの背後に同期メソッドがあります
7. ゲッター: 計算メソッドを定義します (配列内の計算プロパティと同様に、各計算メソッドには戻り値が必要です)。
実際、計算されたものと同じように、属性として使用されます。
モジュール:状態でのデータのモジュール管理: 使用後の違い:
vuex がモジュールに分割されている場合、使用するデータを使用する必要があります。
this.$store.state.モジュール名.xxxx
-
import はデータモジュールをインポートし（モジュールには排他的なメソッドがあります）、モジュールをモジュールに登録します
-
import Vue from 'vue' import Vuex from 'vuex' // 1.引用模块 import homem from "./modules/homem.js" import aboutm from "./modules/aboutm.js" Vue.use(Vuex) export default new Vuex.Store({ modules: {//2配置模块 homem, aboutm } })
-
-
通常の使用:
-
import Vue from 'vue' import Vuex from 'vuex' // 1.引用模块 import homem from "./modules/homem.js" import aboutm from "./modules/aboutm.js" Vue.use(Vuex) export default new Vuex.Store({ modules: {//2配置模块 homem, aboutm } }) -
ヘルパー関数マップを使用する
-
<template> <div> fufuf <!-- 3.绑定自定义事件 --> <!-- <ZiCom @自定义事件=“函数”/> --> <ZiCom @xiaoming="demo"/> </div> </template> <script> import ZiCom from "./ZiCom.vue" export default { components:{ ZiCom }, methods:{ // 4定义函数 并且接收自定义事件上面的数据 demo(val){ console.log(val) } } } </script> <style> </style> -
同期的に非同期的に使用する
短縮表現を実現するためのマップヘルパー関数があります
vuex のデータとメソッドを直接マッピングできる
mapState は計算されたものにマップされ、MapGetter は計算されたものにマップされます。
mapMutation はメソッドにマッピングされます。 mapActions はメソッドにマッピングされます。
vuex の補助関数 (vuex データ操作の複雑さを簡素化します) mapState ---> 配列の使用法:
vuex的辅助函数（简化了我们操纵vuex数据的复杂度）mapState--->数组用法
<template>
<div class="sunClass">
组件
<h1>aa{
{texta}}</h1>
<h1>aa{
{obj.name}}</h1>
</div>
</template>
<script>
import {mapState} from "vuex"
export default {
// 使用mapState
computed:{
// 名字需要和vuex的state数据名相同
...mapState(["texta","obj"])
}
};
</script>Vuex の補助関数 mapState ---> オブジェクトの使用法:
数组方式：如果使用了模块 在mapState中写的就是模块名
<template>
<div class="sunClass">
组件
<!-- 使用数据的时候 就是下面找到的模块名.数据名 -->
<h1>{
{ com.texta}}</h1>
<h1>{
{ com.obj.name}}</h1>
</div>
</template>
<script>
import {mapState} from "vuex"
export default {
// 如果使用了模块 在mapState中写的就是模块名
computed:{
...mapState(["com"])
}
};
</script>
对象方式：
<template>
<div class="sunClass">
组件
<h1>aa{
{xiaoming}}</h1>
<h1>aa{
{xiaohong.name}}</h1>
</div>
</template>
<script>
import {mapState,mapActions} from "vuex"
export default {
// 使用mapState
computed:{
...mapState({
// state.模块名.数据名
xiaoming:(state)=>state.com.texta,
xiaohong:(state)=>state.com.obj,
})
},
methods:{
...mapActions(["axioslink"])
}
};
</script>