vuexの基本的な使い方
vuex是什么?
是Vue.js 应用程序开发的 状态管理模式
vuex是项目中共享数据的管理
構造:
ルートフォルダーの下
Vue.use(vuex)
export default new Vuex.Store({
state: {
token: ''
,
getters: {
getString(state) {
// 固定参数state
return state.token + '你好'
},
mutations: {
setToken(state, value) {
// 第一个是固定参数, 第二个是形参
state.token = value
}
},
actions: {
reflashToken(store, value) {
store.commit('setToken',实参值)
}
},
modules:{
}
})
state
: this.$store.state.property 名を使用してデータを保存しますgetters: vuex の計算されたプロパティ。状態内の 1 つ以上の値に依存して新しい値を生成します。依存する値が変更されると、getter 内のメソッドの戻り値も変更されます。使用: this.$getters.メソッド
名注意不用带括号mutations: vuex でデータを変更する唯一の方法を指定します。
使用: this.$store.commit('メソッド名', 実際のパラメータ)actions: いくつかの非同期操作を実行するために使用されますが、状態データを変更するにはミューテーションを使用する必要があります
: this.$store.dispatch('メソッド名')
vuex でのモジュールの使用:
機能：vuexのデータをモジュール化
使用方法: ストアに新しいモジュール フォルダーを作成し、todo.js ファイルを作成します
コード:
export default {
// 开启命名规范
namespaced: true,
state: {
userinfo: ''
},
getters: {
},
mutations: {
getUserInfo(state, value) {
state.userinfo = value
}
},
actions: {
actionsXxx(store) {
// 在当前模块里面是不需要加todo的
store.commit('getUserInfo', 实参值)
}
}
}
//在index中导入
import todo from './modules/todo'
modules: {
todo
}
todo 内のデータを使用します。
state: this.$store.state.todo.プロパティ名getters: this.$store.getters[‘todo/getters方法名’]
. 構文が使用されない理由に注意してください。 . 構文は命名規則に準拠する必要があり、 / は命名規則に準拠していないためです。mutations: this.$store.commit('todo/メソッド名', 実パラメータ)actions: this.$store.dispatch('todo/メソッド名', 実パラメータ)
state のデータを除いて、上記の state のデータが使用されていることがわかります.。/
モジュールの下のアクション
actions: {
test (store) {
console.log(store)
}
}
まずはここに何が入っているか見てみましょう
actions: {
test (store) {
// console.log(store)
/*
state: 访问当前模块的state数据
访问: state.属性名
rootState: 访问根模块下的state数据
rootState === this.$store.state
访问根模块下的state: rootState.属性名
访问其它模块下的state: rootState.模块名.属性名
*/
console.log(store.rootState.index)
console.log(store.rootState.test.test)
/*
getters: 用于访问当前模块的getters
访问: getters.getters方法名
rootGetters: 用于访问根模块的getters, 通过根模块能访问到所有模块的getters
访问根模块下的getters: rootGertters.根模块下的getters方法名
访问其它模块下的getters: rootGertters['模块名/其它模块下的getters方法名']
*/
console.log(store.rootGetters.index)
console.log(store.rootGetters['test/test'])
/*
commit: 用于调用mutations方法
调用本模块的mutations方法: commit('本模块的mutations方法名', 实参)
调用其它模块的mutations方法:
commit('其它模块的模块名/其它模块的mutations方法名', 实参, {root:true})
dispatch: 用于调用actions方法
调用本模块的actions方法: dispatch('本模块的actions方法名', 实参)
调用其它模块的actiosn方法
dispatch('其它模块的模块名/其它模块的actions方法名', 实参, {root:true})
*/
// 调用其它模块下mutations和dispatch方法
store.commit('test/setTest', Date.now(), {
root: true })
console.log(store.dispatch('test/logTest', null, {
root: true }))
}
}
ミューテーションのメソッドや他のコンポーネントのアクションも todo モジュールで呼び出すことができることに注意してください。
モジュール内のゲッターの 4 つのパラメーター
getters: {
getLength (state, getters, rootState, rootGetters) {
平常我们只用state这一个参数就可以满足大部分需求
但是其实还有其他三个参数
getters: 用于访问当前模块下的getters
访问: getters.getters方法名
rootState: 访问根模块的state数据
访问根模块下的state: rootState.属性名
访问其它模块下的state: rootState.模块名.属性名
rootGetters: 访问根模块的getters方法, 通过根模块能访问到所有模块的getters
访问根模块下的getters: rootGetters.根模块下的getters方法名
访问其它模块下的getters: rootGetters['模块名/其它模块的getters方法名']
}
},