vuex类似与全局变量（公共数据），是vue的一个插件vuex，提供组件之间共享数据的方案
如何在vue项目中使用
- 安装
npm install vuex --save
// 或者
yarn add vuex
- 单独准备文件夹store/index.js，或者直接store.js，然后如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
// 各种配置项
// state 相当于data，用来保存vue项目中的公共数据，在整个vue项目中都可以访问到
state: {
num: 10,
count: 'hh'
},
mutations: {
// 定义了一个mutation，他本质就是一个函数
mAdd1 (state) {
// 这个mutation 的作用就是让state中的num加1
state.num++
},
mSub (state) {
state.num--
},
mAddN (state, m) {
state.num = state.num + m
},
mSubN (state, m) {
state.num = state.num - m
}
}
})
export default store
- 最后导出 export default store（看上边代码）
- 在main.js中，引入，并挂载到vue实例上
import store from './store/index'
new Vue({
store,
render: h => h(App),
}).$mount('#app')
接下来，使用是如何使用vuex中的数据项
使用state中数据项
- 第一种方法（常用，推荐）
在方法中通过this.$store.state.num,num是state中的数据项，在视图中{ {$store.state.num}} - 第二种方法(映射）
按需引入import {mapState} from 'vuex',
在计算属性中computed:{...mapState(['全局数据名称'])}
mutation的使用，修改state中的数据项
官网上：更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
- 第一种方式（常用，推荐）
mutations: {
// 定义了一个mutation，他本质就是一个函数
mAdd1 (state) {
// 这个mutation 的作用就是让state中的num加1
state.num++
},
mSub (state) {
state.num--
},
mAddN (state, m) {
state.num = state.num + m
},
mSubN (state, m) {
state.num = state.num - m
}
}
// ------------------------------------------------------------------------------------
// 调用，修改state中的数据项
this.$store.commit('mAdd1')
this.$store.commit('函数名', [参数])
注意：
- 函数中第一个形参，代表当前vuex中 的state，
- 直接在该函数（例如上边的mAdd1）中修改state
- 调用时，第一个参数不用传，只能传一个参数,可以是对象或者数组
this.$store.commit('mAddN' , 10)
2.第二种方式（映射）
按需引入import {mapMutations} from 'vuex',
在methods中methods:{...mapMutations(['函数名'])}
methods:{
...mapMutations(['mAdd1','mAddN'])}
然后在其他方法中，可以直接调用
this.函数名（）
this.mAdd1()
this.mAddN()