nuxt中使用Vuex

如何在nuxt中使用Vuex?

问题

如何在nuxt中使用Vuex?
以官网例子, 模块方式引用——计数器为例子

---

图1 计数器示例

---

目录结构

---

图2 目录结构

---

js模块写法

// user.js
// state为一个函数, 注意箭头函数写法
const state = () => ({
  counter: 6
})

// mutations为一个对象
const mutations = {
  increment(state) {
    state.counter++
  },
  decrement(state) {
    state.counter--
  }
}
const actions = {

}
const getters = {

}
export default {
  namespace: true,	// 命名空间
  state,
  mutations,
  actions,
  getters
}

如果没有namespace，那么默认地每一个xxx.vue文件都会与store文件夹下的xxx.js相对应

vue写法

直接获取

直接从user.js模块中获取state

{{this.$store.state.user.count}}

computed获取

用computed监听Vuex中state的变化, 及时渲染到界面上。如果在data中接收Vuex的state, 那么有可能监听不到state的变化[1], 一句话就是用computed接受Vuex的状态

computed介绍:

1. 用于变量或方法的复杂逻辑, 如vue官网的反转字符串例子
2. 相较于methods, computed有缓存机制, 相同的结果不会重复计算, 而methods中的方法是每次调用都会计算

// 从vuex中引入mapState
import { mapState } from 'vuex'

{{counter}}{{tag}}

// user.vue computed部分 第一种写法
computed:mapState('user', {
   counter: state => state.counter // 注意写法，没中括号
}),

// user.vue computed部分 第二种写法, 普通函数
computed:mapState('user', {
    counter: function(state) {
    	return state.counter
    }
}),

// user.vue computed部分 第三种写法
computed:mapState("user", ['counter'])

// user.vue computed部分 第四种写法
// 方法与mapState共存
computed:{
    tag(){	// 方法
        return 'something'
    },
    ...mapState('user', {
	counter: function(state) {
    	    return state.counter
    	}
    }),
}

mapState({}|[])函数, 专门用来接收来自Vuex中的state, 接受一个对象或者一个数组,

...mapState()介绍:

因为mapState()不能直接写进computed对象中, 而computed的方法必须写进computed对象中, 所以为了让方法和state共存引入... 即...mapState()写法诞生

...为对象扩展符, 加上之后就可以在computed这个对象中与其他方法共存，没有方法时可以直接上第一、二种写法

触发mutations

// 触发mutations方式
this.$store.commit("mutationName", [parameter])

methods: {
  increment() {
    this.$store.commit('user/increment')
  },
  decrement() {
    this.$store.commit('user/decrement')
  }
},

代码

index.vue中引用user.js模块

// index.vue
      
      
    {{counter}}{{tag}}增加
      减少
     state.counter
      })
  },
  components: {}
}" _ue_custom_node_="true">