vuex初识

一、安装vuex

npm install vuex --save

 

二、在src文件夹下新建文件夹store，并在store中新建store.js文件

 

 

 

三、main.js中引入

//vuex
import store from './store'
Vue.config.productionTip = false

new Vue({
store,
render: h => h(App)
}).$mount('#app')

 

四、在store.js文件中引入vue和vuex

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

 

五、在store.js中写是哪个下面的代码

export default new Vuex.Store({
state: { //相当于data

},
mutations: { //相当于methods，主要用来对state中的值进行操作

},
getters:{ //相当于computed

},
actions: { //与mutations类似，不同的是他提交的是mutations中的函数
},
modules: { //主要用来进行模块化的操作，使用的不多
}
})

 

六、在需要的页面使用
1、直接使用state中的值

{{this.$store.state.count }} //直接用模板语法写this.$store.state加上其中想要使用的值即可，这里用的是count，注意：state中需要先定义count

 

2、使用计算公式算出的值
（1）首先在state里定义几个需要使用的变量

state: { //相当于data
count: 5
price1:30,
price2:50
},

 

(2)在getters中写一个计算函数，这里写一个简单的加法函数

getters:{
totals:function (state) { //这里定义了一个变量，变量的值是函数内计算出的结果，state为上面的state，这个必引，因为要使用的变量都在state里面
let total = state.price1 + state.price2
return total
}
},

 

（3）接下来就和使用state值差不多用就可以了

{{this.$store.getters.totals}} //获取vuex内getters中表达式计算出的值

 

3、操作修改state的值
用mutations做一个小功能，实现点击按钮加减，效果如下：

 

 

（1）当前页面html内写好按钮和数字框

<div style="width: 400px;height:50px;background: aquamarine">
<span>{{this.$store.state.count}}</span>
<el-button @click="add">点击加一</el-button>
<el-button @click="minus">点击减一</el-button>
</div>

 

（2）当前页面js部分内写点击事件

methods:{

add(){
this.$store.commit('addNum',1) //addNum为mutation中的方法名，1为参数
},
minus(){
this.$store.commit('minusNum',1)
}

},

 

（3）store.js的mutations中写处理事件

mutations: {
addNum(state,num){ //对count做加法，state必引，因为要操作的变量在里面（count要先在state中定义）
state.count = state.count+num
},
minusNum(state,num){ //对count做减法，state必引，因为要操作的变量在里面 
state.count = state.count-num
}
},

 

（4）到这里就写好了，然后运行就可以看到效果