nuxt vuex

喜欢ヅ旅行 2021-07-24 11:37 458阅读 0赞

方式一:
    	在store下创建state.js,actions.js,mutations.js和getters.js
    	在组件中使用的方式和正常一样
    
    方式二:
    	方式二中的方式一:
    		创建index.js作为根模块
    			export const state = () => ({
    			  counter: 0
    			})
    			
    			export const mutations = {
    			  increment(state) {
    			    state.counter++
    			  }
    			}
    			...
    			
    	方式二中的方式二:
    	
    		1、如上一步创建index.js作为根模块同时,创建state.js,actions.js,mutations.js和getters.js
    			因为方式一即可使用,但如果同时创建了方式一,又使用方式二的方式一,
    			未将state.js,actions.js,mutations.js和getters.js导入作为唯一值,而试图创建多个state,则不行
    			
    		2、然后通过import导入使用
    	
    
    创建多个modules:
    	(1)在store下创建x.js, x不是index或actions等名称
    	
    	(2)该modules的store格式,和方式一方式二相同
    	
    	(3)调用该modules的方式和正常相同
    	
    	示例:
    		store/index.js文件
    		
    			export const state = () => ({
    			  counter: 0
    			})
    			
    			export const mutations = {
    			  increment(state) {
    			    state.counter++
    			  }
    			}
    	
    	
    		store/todos.js文件
    		
    			export const state = () => ({
    			  list: []
    			})
    			
    			export const mutations = {
    			  add(state, text) {
    			    state.list.push({
    			      text,
    			      done: false
    			    })
    			  },
    			  remove(state, { todo }) {
    			    state.list.splice(state.list.indexOf(todo), 1)
    			  },
    			  toggle(state, todo) {
    			    todo.done = !todo.done
    			  }
    			}
    	
    	会被解析成
    		new Vuex.Store({
    		  state: () => ({
    		    counter: 0
    		  }),
    		  mutations: {
    		    increment(state) {
    		      state.counter++
    		    }
    		  },
    		  modules: {
    		    todos: {
    		      namespaced: true,
    		      state: () => ({
    		        list: []
    		      }),
    		      mutations: {
    		        add(state, { text }) {
    		          state.list.push({
    		            text,
    		            done: false
    		          })
    		        },
    		        remove(state, { todo }) {
    		          state.list.splice(state.list.indexOf(todo), 1)
    		        },
    		        toggle(state, { todo }) {
    		          todo.done = !todo.done
    		        }
    		      }
    		    }
    		  }
    		})
    		
    	调用:
    		this.$store.state.todos.list