nuxt的store使用方法
目录结构
1.store下新建index.js，是nuxt状态树的入口文件
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = () => new Vuex.Store({ getters: {}, state: { num: 0, }, mutations: { addIncrement(state,payload){ console.log(payload) state.num = payload; } }, actions: { SET_ADD_ACTION(context,payload){ setTimeout(() => { context.commit('addIncrement',payload.num); }, 1000); } }})export default store;复制代码 该文件导出一个Vuex实例
2.状态树的模块管理 在store目录下新建其他JS文件或者是新建文件夹，区别是在引用的时候多一层目录结构，其他的没有区别 例如，新建company.js
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);export const getters = {}export const state = ( { a: 333});export const mutations = { reduceNum(state,payload){ state.a = payload; }}export const actions = { SET_REDUCE_ACTION({commit},payload){ console.log(payload) setTimeout(() => { commit('reduceNum',payload.abc) }, 1000); }}export default { getters, state, mutations, actions, namespaced: true}复制代码 - mutations可以对所有的状态进行操作
- 所有的异步操作都应该在actions中完成，actions可以提交mutations的操作
- 如果需要局部状态注册，则在导出时需要namespaced: true一下 这时，index.js的变化有
import Vue from 'vue';import Vuex from 'vuex';import company from './company.js';Vue.use(Vuex);const store = () => new Vuex.Store({ getters: {}, state: { ... }, mutations: { ... }, actions: { ... }, modules:{ company },})export default store;复制代码 状态调用
3.状态的使用
- 使用index.js里的状态
复制代码{
{num}}
- 使用company.js里的状态
复制代码{ {num}}
如有错误，欢迎轻喷哈~