1、首先需要的是在项目中安装,在Vuex的官网中提供了三种安装方式
页面:
<script src="/path/to/vue.js"></script>
<script src="/path/to/vuex.js"></script>
NPM:
npm install vuex --save
Yarn:
yarn add vuex
2、在mian.js中定义vuex的每一个模块
import App from './App'
import router from './router'
import Vuex from 'vuex'
Vue.config.productionTip = false
//注册vuex
Vue.use(Vuex)
const store = new Vuex.Store({ // 这里注意S要大写不然会报错
//定义变量
state: {
num: 12
},
// 定义方法
mutations: {
addnum(state, val) {
state.num += val
},
accnum (state, val) {
state.num *= val
}
},
// 修饰变量
getters: {
getnum(state){
return '数值为:'+ state.num
}
},
// 复杂的或多个的方法同时使用
actions: {
goingNum (context, val) {
context.commit('addnum', val)
context.commit('accnum', val)
}
}
})
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store, // store需要定义进来
components: { App },
template: '<App/>'
})
3、在业务页面使用定义好的变量和方法,通过传参来动态添加数据
<div class="hello">
<h2>{{num}}</h2>
<h3>{{getnum}}</h3>
<button @click="inNum">+</button>
<button @click="goingisnum">GO</button>
</div>
</template>
<script>
import {mapState , mapMutations, mapGetters, mapActions} from 'vuex' // 引入vuex的方法
export default {
name: 'HelloWorld',
computed: {
// 映射出store中的变量,无需在data中定义,可以直接使用
...mapState(['num']),
...mapGetters(['getnum'])
},
data () {
return {
value: 188,
val: 10
}
},
methods: {
// 映射store中的方法
...mapMutations(['addnum']),
...mapActions(['goingNum']),
// 使用方法,并用传参的方式动态添加数据
goingisnum () {
this.goingNum(this.val) // this.value就是本页面定义的参数
},
inNum () {
this.$store.commit('addnum', this.value) // this.value就是本页面定义的参数
}
}
}
</script>
结果:
a、mian.js的原值num为12,本页面定义val为10,点击加号,调用addnum方法,数值为22
b、mian.js的原值num为12,本页面定义val为10,点击GO后,调用goingNum方法,执行加再执行乘,数值为220
4、modules模块的用法
a、首先新建文件夹src>sotre>modules,新建文件:modules>modules.js和 store>index.js
b、在main.js中引入整个store文件
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './stort' // 引入文件
Vue.config.productionTip = false
Vue.use(Vuex)
new Vue({
el: '#app',
router,
store, // 引入完成需要注册一下
components: { App },
template: '<App/>'
})
c、在index.js中注册所有的文件集合
import Vue from 'vue'
import Vuex from 'vuex'
import mustbe from './modules/mustbe.js' // 将文件引入store中
Vue.use(Vuex)
export default new Vuex.Store({
modules: {
mustbe // 注册到store中
}
})
d、新建的文件中写入需要定义模块
const mustbe = {
// 创建state模块
state: {
mustValue: 'i did it'
}
}
export default mustbe
e、最后在逻辑页面拿到数据
data () {
return {
mustValue: this.$store.state.mustbe.mustValue
}
}