簡単に言うと、Vuexはパブリック変数を格納するために使用されます。手動でカプセル化するパブリックコンポーネントとの最大の違いは、手動でサブパッケージ化することです。リアクティブ、つまりコンポーネントの変更は簡単ではありません。別の要素での彼の価値も変化します。vueコンポーネントに書き込むデータの値は、応答性が高くなる可能性があります。これは、vueフレームワークがそれ自体をカプセル化するためです。
1. Vuexの構造：
コンポーネントの一般的な構造はActions Vue Components State3つだけですが、状態を変更するために少し固定された要求を行うMutationsため、Mutationsこのメソッドを使用する必要があります。このメソッドは、Devtoolsこの機能プラグインの後ろに続き、このプラグインの後に続くためです。では、リアルタイムトラッキングで物事をVuexできるようになります。最終的には、状態を変更するコンポーネントがどれになりますか。これは、このファイナルになります。非同期の操作では、Actionsこのメソッドを適切に使用します。その理由は何ですか。または、devtoos同期の追跡操作のみが追跡できないため、非同期操作のアクションを使用して追跡します。
2.Vuexの使用
2.1新しいフォルダ
通常、デフォルトではストアがデフォルトのフォルダとして使用されます。
2.2ファイルコンテンツを作成する
import Vue from 'vue'
// 为了考虑 ie 浏览器的兼容性
import 'es6-promise/auto'
import Vuex from 'vuex'
// 安装插件
Vue.use(Vuex)
// 创建对象
const store = new Vuex.Store({
// 容器
// 数据
state: {
count: 100,
Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : '',
userinfo: {
token: null,
userid: null
}
},
getters: {
gettoken(state) {
return state.userinfo.token
},
getuserid(state) {
return state.userinfo.userid
}
},
// 方法
mutations: {
// 添加 token
addUsertoken(state, token) {
state.userinfo.token = token;
},
// 添加 id
addUserId(state, id) {
state.userinfo.userid = id;
},
},
// 方法（异步方法）
actions: {
// 添加token
addUsertokenAction(context, token) {
context.commit("addUsertoken", token);
},
// 添加user
addUserIdAction(context, userid) {
context.commit("addUserId", userid);
}
},
// 模块
modules: {
},
})
// 导出
export default store