vuex的安装
npm install vuex --save
yarn add vuex
新建目录
新建文件夹store,文件index.js
全局配置
在main.js中进行配置
import Vue from 'vue'
import App from './App'
import store from './store'
new Vue({
el: '#app',
store,
router,
components: { App },
template: '<App/>'
})
store中代码
index.js里的代码
import Vue from 'vue'
import Vuex from 'vuex'
import Corss from './corss.js'
Vue.use(Vuex)
//创建store对象
export default new Vuex.Store({
state: {
},
mutations: {
},
actions: {
},
modules: {
corss
}
})
corss.js中代码
也可吧代码直接写在index.js中
const state = {
count:0
}
const mutations = {
add(state){
count ++
},
addN(state,step){
//变更状态
state.count += step
},
change(state, value) {
state.bLoadFlow = value;
},
}
const actions = {
addAsync(context){
setTimeout(()=>{
//在actions中不能直接修改state中的数据
//必须通过context.commit('')触发某个mutation才行
context.commit('addN')
},1000)
}
addAsync2(context){
setTimeout(()=>{
context.commit('addN',step)
},1000)
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
使用
state:用于保存所有组件的公共数据
1、组件访问State 中数据的第一种方式
this.$store.state.corss.count
2、组件访问State 中数据的第二种方式
(1)从vuex中按需导入mapState函数
import {mapState} from vuex
(2)映射 将去全局数据,映射为当前组件的计算属性
computed:{
...mapState{corss,['count']}
}
mutation:用于变更store中的数据
1、触发mutations的第一种方式
this.$store.commit('函数名')
如下:
this.$store.commit('corss/add')
//触发时携带参数
this.$store.commit('corss/add',3)
2、触发mutations的第二种方式
从vuex中按需导入mapMutations函数。
import {mapMutations} from vuex
methods:{
...mapMutations(corss,['add','addN'])
btn(){
this.add()
}
}
Actions:用于处理异步操作。
action可以包含任意异步操作。actions对象里的方法需要使用store.dispatch调用。
1、触发actions的第一种方式
methods:{
handle(){
//
this.$store.dispatch('corss/addAsync')
this.$store.dispatch('corss/addAsync',5)
}
}
2、触发actions的第二种方式
import {mapActions} from vuex
methods:{
...mapActions(corss,['addAsync','addN'])
btn(){
this.addAsync()
}
}```
**Modules:**
当应用变得非常复杂时,store对象就有可能变得相当臃肿。vuex允许将store分割成模块(module),每个模块拥有自己的state、mutation、action、getter。