2. it技术
  3. VUEX

VUEX

it2024-10-19  39

官网 链接 学习可以在线编辑和视频结合的网址scrimba

mapState

index.js 写法一：

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count0: 3 } }); import { mapState } from 'vuex'; new Vue({ el: '#app', store, data() { return { localCount: 4 } }, computed: mapState({ count: state => state.count, countAlias: 'count0', countPlusLocalState (state) { return state.count0 + this.localCount } }) }); <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div id="app"> {{countPlusLocalState}} 111 {{countAlias}} </div> <script src="index.pack.js"></script> </body> </html>

写法二：

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 3 } }); import { mapState } from 'vuex'; new Vue({ el: '#app', store, data() { return { localCount: 4 } }, computed: mapState([ 'count' ]) });

vuex getters /mapGetters

index.js

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false }, { id: 3, text: '...', done: true }, { id: 4, text: '...', done: false }, { id: 5, text: '...', done: false }, { id: 6, text: '...', done: true }, ] }, getters: { doneTodos: state => { // return state.todos; return state.todos.filter(todo => todo.done); }, doneTodosCount: (state, getters) => { return getters.doneTodos.length } } }); new Vue({ el: '#app', store, data: { }, computed: { } }); console.log(store.getters.doneTodos) console.log("length:",store.getters.doneTodosCount)

打印内容：

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false }, ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done==false); }, doneTodosCount: (state, getters) => { return getters.doneTodos.length }, getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } } }); new Vue({ el: '#app', store, data: { }, computed: { } }); console.log(store.getters.doneTodos); console.log(store.getters.doneTodos.length); console.log(store.getters.getTodoById(1)) console.log(store.getters.getTodoById(48))

写法一：`this.$store.getters` import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false }, ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done); }, doneTodosCount: (state, getters) => { return getters.doneTodos.length }, getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } } }); new Vue({ el: '#app', store, data: { }, computed: { doneTodosCount () { return this.$store.getters.doneTodosCount } } }); console.log(store.getters.getTodoById(48)) <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div id="app"> Completed Todos: {{ doneTodosCount }} </div> <script src="index.pack.js"></script> </body> </html>

写法二：mapGetters

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { todos: [ { id: 1, text: '...', done: true }, { id: 2, text: '...', done: false }, ] }, getters: { doneTodos: state => { return state.todos.filter(todo => todo.done); }, doneTodosCount: (state, getters) => { return getters.doneTodos.length }, getTodoById: (state) => (id) => { return state.todos.find(todo => todo.id === id) } } }); import { mapGetters } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: mapGetters([ 'doneTodos', 'doneTodosCount', 'getTodoById' ]) }); console.log(store.getters.getTodoById(48)) <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div id="app"> Completed Todos: {{ doneTodosCount }} <hr> doneTodos:{{doneTodos}} <hr> getTodoById:{{getTodoById(1)}} </div> <script src="index.pack.js"></script> </body> </html>

mutation

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ // return "state.count++:"+state.count++; }, incrementBy (state, n) { state.count += n } } }); import { mapState } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: mapState([ 'count' ]), }); store.commit('increment'); console.log(store.state.count);

commit写法一

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 2 }, mutations: { increment (state) { state.count++ }, incrementBy (state, n) { state.count += n } } }); import { mapState } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: mapState([ 'count' ]), }); store.commit('incrementBy', 8); console.log(store.state.count);

commit写法二

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 2 }, mutations: { increment (state) { state.count++ }, incrementBy (state, payload) { state.count += payload.amount } } }); import { mapState } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: mapState([ 'count' ]), }); store.commit({ type: 'incrementBy', amount: 40 }) // store.commit('incrementBy', { amount: 29 }); console.log(store.state.count);

set

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ }, incrementBy (state, payload) { state.count += payload.amount } } }); import { mapState } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: mapState([ 'count' ]), mounted(){ this.$set(app, 'new prop', 123) } }); store.commit({ type: 'incrementBy', amount: 40 }) // store.commit('incrementBy', { amount: 29 }); console.log(store.state.count); Vue.set(app, 'new prop', 123); 等效于 state.obj = { ...state.obj, newProp: 123 } console.log("state:",store.state);

methods方法中使用commit

写法一：

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment1 (state) { state.count++ }, incrementBy (state, payload) { state.count += payload.amount } } }); import { mapState } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: mapState([ 'count' ]), methods: { increment () { this.$store.commit('increment1') } } }); <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div id="app"> {{count}} <button @click='increment'>+</button> </div> <script src="index.pack.js"></script> </body> </html>

写法二使用mapMutations

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ }, incrementBy (state, payload) { state.count += payload.amount } } }); import { mapState, mapMutations } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: mapState([ 'count' ]), methods: mapMutations([ 'increment', 'incrementBy' ]) }); <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div id="app"> {{count}} <button @click='increment'>+</button> </div> <script src="index.pack.js"></script> </body> </html>

action

第一种 不使用action，使用methods中commit调用store的mutation

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ }, decrement (state) { state.count-- } }, actions: { } }) import { mapState } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: mapState([ 'count' ]), methods: { increment () { this.$store.commit('increment'); }, decrement () { this.$store.commit('decrement'); }, } }); <html> <head> <link rel="stylesheet" href="index.css"> </head> <style> html, body { margin: 0; padding: 0; } #app { display: flex; flex-direction: row; align-content: center; justify-content: center; margin-top: 20% } #app > * { margin-left: 15px; } </style> <body> <div id="app"> {{count}} <button @click='increment'>+</button> <button @click='decrement'>-</button> </div> <script src="index.pack.js"></script> </body> </html>

methods中this.$store.commit(‘increment’);<===>store中action中 context.commit(‘increment’) 使用action 达到以上效果 action 中使用mutation 可达到异步效果

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ }, decrement (state) { state.count-- } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 2000) } } }) import { mapState, mapMutations } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: mapState([ 'count' ]), methods: { increment () { this.$store.dispatch('incrementAsync'); }, decrement () { this.$store.commit('decrement'); }, } }); <html> <head> <link rel="stylesheet" href="index.css"> </head> <style> html, body { margin: 0; padding: 0; } #app { display: flex; flex-direction: row; align-content: center; justify-content: center; margin-top: 20% } #app > * { margin-left: 15px; } </style> <body> <div id="app"> {{count}} <button @click='increment'>+</button> <button @click='decrement'>-</button> </div> <script src="index.pack.js"></script> </body> </html>
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ }, decrement (state) { state.count-- } }, actions: { incrementAsync ({ commit }) { setTimeout(() => { commit('increment') }, 1000) }, actionA ({ commit }) { return new Promise((resolve, reject) => { setTimeout(() => { commit('someMutation') resolve() }, 1000) }) }, actionB ({ dispatch, commit }) { return dispatch('actionA').then(() => { commit('someOtherMutation') }) }, async actionC ({ commit }) { commit('gotData', await getData()) }, async actionD ({ dispatch, commit} ) { await dispatch('actionC') commit('gotOtherData', await getOtherData()) } } }) import { mapState, mapMutations } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: mapState([ 'count' ]), methods: { increment () { this.$store.dispatch('incrementAsync'); }, decrement () { this.$store.commit('decrement'); }, testAction () { this.$store.dispatch('actionA').then(() => { }) } } });

module

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const moduleA = { state: { count: 3 }, mutations: { increment (state) { state.count++ } }, // getters: { // doubleCount (state) { // return state.count * 2 // } // }, // actions: { // incrementIfOdd({state, commit}) { // if (state.count % 2 === 1) { // commit('increment'); // } // } // } } const moduleB = { state: { count: 8 }, mutations: { }, getters: { }, actions: { } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB }, state: { count: 2 }, mutations: { }, getters: { }, actions: { } }) new Vue({ el: '#app', store, data: { }, computed: { } }); console.log(store.state.a.count); // console.log(store.state.b.count); store.commit('increment'); console.log(store.state.a.count);

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const moduleA = { namespaced: true, state: { count: 3 }, mutations: { increment (state) { state.count++ } }, getters: { doubleCount (state) { return state.count * 2 } }, actions: { incrementIfOdd({state, commit}) { if (state.count % 2 === 1) { commit('increment'); } } } } const moduleB = { namespaced: true, modules: { subModule: { namespaced: true, state: { }, mutations: { login () {} }, getters: { login () {} }, actions: { login () {} } } }, state: { count: 8 }, mutations: { }, getters: { someGetter (state, getters, rootState, rootGetters) { rootState.count; state.count; getters.someOtherGetter; rootGetters.someOtherGetter; } }, actions: { someAction({ dispatch, commit, getters, rootGetters }) { getters.someGetter; rootGetters.someGetter; dispatch('someOtherAction'); dispatch('someOtherAction', null, { root: true }); commit('someMutation'); commit('someMutation', null, { root: true }); } } } const store = new Vuex.Store({ modules: { a: moduleA, b: moduleB }, state: { count: 2 }, mutations: { }, getters: { }, actions: { } }) import { mapState, mapActions } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: mapState({ a: state => state.a.count, b: state => state.b.subModule.count, }), methods: mapActions('some/nested/module', [ 'foo' // thisfoo() ]) // 以上等效 methods: mapActions([ // 'some/nested/module/foo' // 等效于this['some/nested/module/foo']() ]) // 以上等效 methods: mapActions('some/nested/module', [ // 'some/nested/module/foo' // this['some/nested/module/foo']() // ]) }); // console.log(store.state.a.count); // // console.log(store.state.b.count); // store.commit('a/increment'); // console.log(store.state.a.count); store.commit('b/subModule/login'); store.dispatch('b/subModule/login'); store.getters['b/subModule/login'];

vuex

get

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ strict: true, state: { message: 'Hello Vuex', }, mutations: { updateMessage (state, message) { state.message = message } } }) import { mapState } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: { message () { return this.$store.state.message } }, methods: { updateMessage (e) { this.$store.commit('updateMessage', e.target.value) } } }) <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div id="app"> {{message}}<br> <input :value='message' @input='updateMessage' /> </div> <script src="index.pack.js"></script> </body> </html>

set

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ strict: true, state: { message: 'Hello Vuex', }, mutations: { updateMessage (state, message) { state.message = message } } }) import { mapState } from 'vuex'; new Vue({ el: '#app', store, data: { }, computed: { message: { get () { return this.$store.state.message }, set (value) { this.$store.commit('updateMessage', value) } } }, methods: { updateMessage (e) { this.$store.commit('updateMessage', e.target.value) } } }) <html> <head> <link rel="stylesheet" href="index.css"> </head> <body> <div id="app"> {{message}}<br> <input v-model='message' /> </div> <script src="index.pack.js"></script> </body> </html>

vuex plugin

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); // const myPlugin = store => { // // Called when store is initialized // store.subscribe((mutation, state) => { // // Called after every mutation // // Mutation comes in the format `{ type, payload }` // }) // } // function createWebSocketPlugin (socket) { // return store => { // socket.on('data', data => { // store.commit('receiveData', data) // }) // store.subscribe(mutation => { // if (mutation.type === 'UPDATE_DATA') { // socket.emit('update', mutation.payload) // } // }) // } // } // const myPluginWithSnapshot = store => { // let prevState = _.cloneDeep(store.state) // store.subscribe((mutation, state) => { // let nextState = _.cloneDeep(state) // // Compare prevState to nextState // // Save state for next mutation // prevState = nextState // }) // } import createLogger from 'vuex/dist/logger' const logger = createLogger({ collapsed: false, filter (mutation, stateBefore, stateAfter) { return mutation.type !== 'aBlacklistedMutation' }, transformer (state) { return state.subTree }, mutationTransformer (mutation) { return mutation.type }, logger: console }) const store = new Vuex.Store({ //... plugins: [createLogger()] }) new Vue({ el: '#app', data: { } });
最新回复(0)