This is the 28th day of my participation in the August Text Challenge.More challenges in August
Preface:
Hello again, I’m Loncon, a little bit of a geek on the front-end road, and let’s get started: today we’ll talk about namespaced namespaced in Vuex.
Vuex introduction
Vuex is a state management tool for VUE. State is data. State management is the centralized management of data common to vUE. By default, state is private to each module, and actions, mutations, and getters are registered in the global namespace
Core concepts – State Status
State provides the only common data source, and all shared data is stored in State in the Store.
State provides data
Open the store.js file in the project and add the data we want to share to the state object.
Const store = new Vuex.Store({// Vuex configuration // state: state refers to the data in Vuex: {money: 100}})Copy the codeBy default, state is private to each module, and the actions, mutations, and getters are registered in the global namespace **. The action, mutation, and getter of the mutation can be directly called globally, as shown in the following figure:Copy the code
However, if we want to ensure high closure of our internal modules, we can use Namespaced
modules/user.js
const state = { userInfo: { name: 'zs', age: 18 }, myMsg: Open mutations = {open mutations, open mutations, open mutations, open mutations, open mutations, open mutations, open mutations, open mutations, open mutations, open mutations, open mutations msg) { state.myMsg = msg } } const actions = {} const getters = {} export default { namespaced: true, state, mutations, actions, getters }Copy the codeMutation in the commit module
Use this. Codestore.mit ('mutation function name ', parameter) from global: this. codestore.mit ('mutation function name ', parameter) moduleCopy the codeNamespaced: true, to add a map, you can add the module name, find the corresponding module state/mutations/actions/getters
Computed: {// Globally... MapState (['count']), //... MapState (' user '[' myMsg']),}, the methods: {/ / global... MapMutations (['addCount']) mapMutations('user', ['updateMsg']) }Copy the code