Vue 引入 Vuex
// store/index.jsimport Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({ state: { account: "", password: "", age: 0 }, mutations: { account(state, account) { state.account = account; }, account(state, password) { state.password = password; }, account(state, age) { state.age = age; }, }})export default store挂载至 Vue
import Vue from 'vue'import App from './App'import store from './store'Vue.config.productionTip = falseVue.prototype.$store = storeconst app = new Vue({ store, ...App})app.$mount()页面引用 Vuex
使用 mapState, mapMutations 魔术方法导入
mapState
// ....<script> import {mapState} from 'vuex' export default { methods: { // 日常写法 account(account) { this.$store.commit("account", account) }, password(password) { this.$store.commit("password", password) }, age(age) { this.$store.commit("age", age) }, otherMethods() { } }, methods: { // magic style1 ...mapMutations(['account', 'password', 'age']), otherMethods() { } }, methods: { // magic style2 自定义方法名 ...mapMutations({ account: 'account', password: 'password', age: 'age', }), otherMethods() { } }, methods: { // magic style3 更多灵活处理 ...mapMutations({ account: (state, account) => { state.commit("account", account) }, password: (state, password) => { state.commit("password", password) }, age: (state, age) => { state.commit("age", age) } }), otherMethods() { } } }</script>mapMutations
// ....<script> import {mapMutations} from 'vuex' export default { methods: { // 日常写法 account(account) { this.$store.commit("account", account) }, password(password) { this.$store.commit("password", password) }, age(age) { this.$store.commit("age", age) }, otherMethods() { } }, methods: { // magic style1 ...mapMutations(['account', 'password', 'age']), otherMethods() { } }, methods: { // magic style2 自定义方法名 ...mapMutations({ account: 'account', password: 'password', age: 'age', }), otherMethods() { } }, methods: { // magic style3 更多灵活处理 ...mapMutations({ account: (state, account) => { state.commit("account", account) }, password: (state, password) => { state.commit("password", password) }, age: (state, age) => { state.commit("age", age) } }), otherMethods() { } } }</script>