前提步驟：
1、 搭建一個(gè)vue2項(xiàng)目
2、 修改App.vue文件；修改App.vue組件里面引入的子組件內(nèi)容（在src文件夾下新建pages文件夾，新建index.vue頁面，以供使用）；
正式開始vuex的相關(guān)操作：
一、安裝vuex：
npm install vuex --save
注意，以上的命令安裝的會(huì)是最新版本的。如果沒有指定版本,npm會(huì)默認(rèn)獲取最新版本。但是vue2.0只能安裝vuex3.x版本,最高3.6.2,vue3.0才能裝vuex4.x版本。因此如果是vue2項(xiàng)目要指定版本：
npm install vuex@3.6.2 --save
二、項(xiàng)目配置VUEX：
項(xiàng)目src目錄下創(chuàng)建store目錄，并在store下創(chuàng)建index.js，初始化Vuex。
Store文件夾中主要js如下：
三、創(chuàng)建相關(guān)文件：
1、state
概念：
state：存儲(chǔ)應(yīng)用狀態(tài)數(shù)據(jù)的對(duì)象，與vue中data類似
步驟：
（1）比如創(chuàng)建state.js文件的內(nèi)容如下：
export default {
state1: "狀態(tài)1"
}
（2）在store文件夾下的index.js文件下引入：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import state from '@/store/state.js'
const store = new Vuex.Store({
// 用來存入狀態(tài)
state: state
})
export default store
（3）接下來，將store掛載到vue實(shí)例中，在src文件夾下的main.js文件中添加：
…
import store from './store'
new Vue({
…
store,
}).$mount('#app')
最后代碼呈現(xiàn)如下：
（4）在組件中使用vuex?？芍苯邮褂没蛘呤褂幂o助函數(shù)
1>直接使用：this.$store.state.xxx
<template>
<div>
狀態(tài)數(shù)據(jù)1：{{this.$store.state.state1}}
</div>
</template>
2>使用輔助函數(shù)：mapState
<template>
<div>
狀態(tài)數(shù)據(jù)1：{{state1}}
</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
computed:{
...mapState(['state1']) // 使用對(duì)象展開運(yùn)算符將此對(duì)象混入到外部對(duì)象中
}
// 沒使用對(duì)象展開運(yùn)算符的寫法為：
// computed: mapState(['state1'])
}
</script>
2、getters
概念：
getters: 類似vue的計(jì)算屬性，store中數(shù)據(jù)的變化，getters的數(shù)據(jù)也會(huì)發(fā)生變化
步驟：
（1）創(chuàng)建getters.js文件內(nèi)容可如下：
export default {
numSum:(state)=>{
var sum=0;
for(var i=0; i<state.numbers.length; i++){
sum +=state.numbers[i]
}
return sum;
}
}
（2）在store文件夾下的index.js文件下引入（參照引入state.js）
（3）將store掛載到vue實(shí)例中（state已經(jīng)實(shí)現(xiàn)了這步操作）
（4）在組件中使用（參考state里面數(shù)據(jù)的使用，使用輔助函數(shù)mapGetters也類似）
3、mutations
概念：
mutations: 提交mutation來修改store中的狀態(tài)，同步操作
步驟：
（1）創(chuàng)建mutations.js文件內(nèi)容可如下：
export default {
mutEditStat1(state){
state.state1 = '狀態(tài)111改變了'
}
}
（2）在store文件夾下的index.js文件下引入（參照引入state.js）
（3）將store掛載到vue實(shí)例中（state已經(jīng)實(shí)現(xiàn)了這步操作）
（4）在組件中使用：
1>直接使用：
<template>
<div>
{{state1}}
<button @click="update1()">點(diǎn)擊改變狀態(tài)</button>
</div>
</template>
<script>
export default {
methods: {
update1(){
this.$store.commit('mutEditStat1') // 喚醒一個(gè) mutation 處理函數(shù)mutEditStat1
}
}
}
</script>
2>使用mapMutations輔助函數(shù)：
<template>
<div>
{{state1}}
<button @click="update1()">點(diǎn)擊改變狀態(tài)</button>
</div>
</template>
<script>
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['mutEditStat1']),
update1(){
this.mutEditStat1()
}
}
}
</script>
若帶有參數(shù)，
Mutations文件內(nèi)容可如下：
export default {
mutEditStat2(state,req){
state.state2="狀態(tài)2" + req;
}
}
其它內(nèi)容和無參數(shù)的內(nèi)容一樣，只是在用的時(shí)候傳參：
update3(){
this.mutEditStat2('傳參過來的')
}
4、actions
概念：
actions:與mutations類似，提交修改state的行為，處理異步任務(wù)（提交的是mutation，不是直接修改狀態(tài)）
步驟：
（1）創(chuàng)建ations.js文件內(nèi)容可如下：
export default {
actEditStat1(context){
setTimeout(()=>{
context.commit("mutEditStat1")
}, 3000) //我們此時(shí)就可以在 action 內(nèi)部執(zhí)行異步操作了,解決mutation 必須同步執(zhí)行的問題
}
// 帶參數(shù)
actEditStat1(context,num){
setTimeout(()=>{
context.commit("mutEditStat1")
}, 3000)
console.log(num)
}
}
（2）在store文件夾下的index.js文件下引入（參照引入state.js）
（3）將store掛載到vue實(shí)例中（state已經(jīng)實(shí)現(xiàn)了這步操作）
（4）在組件中使用：
1>直接使用：
<template>
<div>
{{state1}}
<button @click="update()">actions提交mutation更新狀態(tài)</button>
</div>
</template>
<script>
export default {
methods: {
update(){
this.$store.dispatch('actEditStat1') //分發(fā) Action。Action 通過 store.dispatch 方法觸發(fā)
// 若是帶參數(shù)：
// this.$store.dispatch('actEditStat1',22)
}
}
}
</script>
使用mapActions輔助函數(shù)：
<template>
<div>
{{state1}}
<button @click="update1()">點(diǎn)擊改變狀態(tài)</button>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions(['actEditStat1']), // `this.mutEditStat1()` 映射為 `this.$store.commit('mutEditStat1')`
update1(){
this.actEditStat1()
}
}
}
</script>
注意： mutation 必須是同步函數(shù)
輔助函數(shù)總結(jié):
mapState和mapGetters寫在computed中，mapMutations和mapActions寫在methods中
5、modules
概念：
modules：模塊化狀態(tài)管理，為了開發(fā)大型項(xiàng)目，方便狀態(tài)管理而使用的
使用后目錄大概如下：
模塊內(nèi)內(nèi)容沒變化，主要需要修改的index.js文件內(nèi)容：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
import userInfo from '@/store/modules/userInfo.js'
import shopCart from '@/store/modules/shopCart.js'
export default new Vuex.Store({
state: {},
getters: {},
mutations: {},
actions: {},
modules:{
userInfo,
shopCart
}
})
shopCart.js文件內(nèi)容：
import state from '@/store/modules/shopCart/state.js'
import getters from '@/store/modules/shopCart/getters.js'
import mutations from '@/store/modules/shopCart/mutations.js'
import actions from '@/store/modules/shopCart/actions.js'
export default {
namespaced: true, //開啟命名空間
state:state,
getters: getters,
mutations: mutations,
actions: actions
}
userInfo.js文件內(nèi)容類似。自行修改。
組件中使用示例1：
export default {
methods: {
login(){
if(this.$store.state.userInfo.isLogin){ // modules中直接使用state： this.$store.state.模塊名.xxx;
this.$store.commit('userInfo/logout'); // modules中直接使用mutations:this.$store.commit('模塊名/mutation名', 參數(shù));
}else{
this.$store.commit('userInfo/login');
}
}
},
}
示例2：文章來源：http://www.zghlxwxcb.cn/news/detail-730935.html
computed:{
// modules中使用mapState輔助函數(shù)：
// computed: {
// ...mapState('模塊名', ['xxx']),
// ...mapState('模塊名', {'新名字': 'xxx'})
// }
...mapState({
userInfo:state=>state.userInfo
})
},
示例3：文章來源地址http://www.zghlxwxcb.cn/news/detail-730935.html
computed:{
// modules中使用mapGetters輔助函數(shù)：
// computed: {
// ...mapGetters('模塊名', ['xxx']),
// ...mapGetters('模塊名', {'新名字': 'xxx'})
// }
...mapGetters("shopCart", { // 對(duì)象形式
countGoods: "countGoods"
}),
},
到了這里，關(guān)于二、怎么簡單使用vuex的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
