Shulou(Shulou.com)06/01 Report--

Editor to share with you how to add a global store in Vue. I hope you will get something after reading this article. Let's discuss it together.

Vue add Global store enter install npm install on the command line-- save vuex

Reference in the main.js file

Store and declare store in new Vue

Import store from'. / store'store

Create a page file in src

Create a js file for module under the page file (the content is as follows)

Const state = {HomeStatus: {LoginStatus:false}, Users: [],} const mutations = {['setuseinfo'] (state, data) {},} const actions = {}

Create a store file under src

Create an index js file under the store file

Import Vue from 'vue'import Vuex from' vuex'import page from'.. / page/module'Vue.use (Vuex) export default new Vuex.Store ({state: {}, modules: {page}})

Explanation of how to use store vuex contains five basic objects

State: stores the state. That is, variables.

Getters: derived state. That is, get in set and get, there are two optional parameters: state and getters can get variables in state and other getters, respectively. External call method: store.getters.personInfo (). It's similar to vue's computed.

Mutations: submit status changes. That is, set in set and get, which is the only way to modify state in vuex, but asynchronous operations are not supported. The first parameter defaults to state. External call method: store.commit ('SET_AGE', 18). Similar to methods in vue.

Actions: similar to mutations. However, actions supports asynchronous operations. The first parameter defaults to an object that has the same parameter properties as store. External call method: store.dispatch ('nameAsyn'). This.$store.dispatch ('user/login', this.loginForm)

The content of the sub-module of modules:store is equivalent to an instance of store. The invocation method is similar to that described earlier, except that you add the name of the current submodule, such as store.a.getters.xxx ().

Import Vue from 'vue'import Vuex from' vuex'import state from'. / state.js'import getters from'. / getters'import mutations from'. / mutations.js'import actions from'. / actions.js'// installs Vue Devtools debugging tool https://blog.csdn.net/li22356/article/details/113092495// mounts Vuex. The help manual https://www.jianshu.com/p/2e5973fe1223// modularization can be found in https://www.yisu.com/article/150752.htmVue.use(Vuex);. / / create VueX object. Use {{$store.state.name}} console.log (this.$store.state.name) / / add state object Vue.set (state, "age", 15) on a single page Delete Vue.delete (state,'age') const store = new Vuex.Store ({/ / store data, store status / / usage state, / / process state members to the outside world / / state the state object / / getters current getters object in the current VueX object, and use other getter under getters to use / / components to use this.$store.getters.fullInfo getters, / / state member operations, a collection of methods to manipulate state data For example, the data is modified, added, deleted, and so on. / / component calls this.$store.commit ('SET_TOKEN','new token') mount method / / synchronous processing mutations, / / Asynchronous processing / / component uses this.$store.dispatch (' aEdit','new TOKEN') actions}) Export default () = > {return store} import Vue from 'vue'import Vuex from' vuex'Vue.use (Vuex) export default new Vuex.Store ({/ / put global parameters here, such as user login information state: {token: "helloVueX", name: ", age:"}, mutations: {/ / here are set methods, such as modifications, additions, deletions, and so on. / / component calls this.$store.commit ('SET_TOKEN','new token') mount method SET_TOKEN: (state, token) = > {state.token = token console.log (state.token) }}, / / getters the current getters object (object can be changed twice) It is used to use other getter under getters, and components are taken through this.$store.getters.fullInfo to use getters: {token: state = > state.token, nameInfo (state) {return "name:" + state.name}, fullInfo (state, getters) {return getters.nameInfo + 'age:' + state.age}}. / / Asynchronous processing / / use this.$store.dispatch ('aEdit','new TOKEN') actions in components: {QQlogin ({commit}, token) {return new Promise ((resolve, reject) = > {setToken (token)) / / store token in cookie commit ('SET_TOKEN', token) / / commit call mutations data resolve ()}}, aEdit (context, payload) {return new Promise ((resolve, reject) = > {setTimeout () = > {context.commit (' SET_TOKEN') Payload) resolve ()}, 2000)})}, modules: {/ / this is what I understand to group global variables. So you need to write to declare other store files in advance, and then introduce method calls between vuex,module here}}.

When we use vuex, we usually create multiple module by function. We should be very clear about the operation in a single module. How can we call multiple module?

Detailed code:

Now that I have two module:user and menu, I want to call the actions method of menu in user, as follows:

Const user = {state: {permissions: []}, mutations: {SET_PERMISSIONS: (state, permissions) = > {state.permissions = permissions}}, actions: {getPermissions ({commit}) {queryPermissions () .then (res = > {sessionStorage.setItem ('permissions', JSON.stringify (res)) this.dispatch (' setPermissions', res)) / / method} in module)}, setPermissions ({commit, dispatch, state, rootState}, data) {commit ('SET_PERMISSIONS', data); / / commit dispatch (' setMenuData', data) in this module; / / method console.log (rootState.menu.menus) in menu / / take the parameters in menu}} export default userconst menu = {state: {menus: []}, mutations: {SET_MENUS: (state, data) = > {state.menus = data}}, actions: {setMenuData ({commit, state}, data) {commit ('SET_MENUS', data);}} export default menu

Explanation:

The first parameter of each method in actions actually has a lot of properties, but we are used to deconstruction, such as setMenuData ({commit, state}, data). When you output all the values of the first parameter, such as setMenuData (param,data), the output param will find that it contains the following attributes:

The vue file calls the action method of store const actions = {/ / dynamically generate routing async generateRoutes ({commit}) {/ / execute code}} created () {this.generateRoutes ()}, methods: {. MapActions ('menu', [' generateRoutes'])} read this article I believe you have a certain understanding of "how to add global store in Vue". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.