怎么用vuex

這篇文章給大家分享的是有關(guān)怎么用vuex的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。

首先貼上官方文檔，
https://vuex.vuejs.org/guide/modules.html

 新建項(xiàng)目就不多說(shuō)了，用vue-cli ，在新建項(xiàng)目的選項(xiàng)上選擇了typescript 和class 類(lèi)的方式，這種形式也和react 的class 方式是很像的，然后一直下一步下一步，項(xiàng)目就給你自動(dòng)創(chuàng)建成功了，很吊有沒(méi)有。

根據(jù)提示 運(yùn)行 npm run serve 熟悉的界面就來(lái)了：

這些沒(méi)必要說(shuō)了，下面進(jìn)入正題，其實(shí)已經(jīng)自動(dòng)整合了vuex 
并且創(chuàng)建了 store.ts

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

Vue.use(Vuex);

export default new Vuex.Store({
state: {
    name: 'Hello Word',
    count: 1,
    users: [
        { name: '×××', age: 18 },
        { name: '小劉', age: 18 },
        { name: '小王', age: 11 },
        { name: '小張', age: 18 },
        { name: '小鵬', age: 18 },
        { name: '小強(qiáng)', age: 19 },
        { name: '小子', age: 20 },
    ]
},
mutations: {
    increment(state, payload) {
        // mutate state
        state.count += payload.count;
    },
},
getters: {
    getAges: (state) => {
        return state.users.filter(user => {
            return user.age > 18;
        });
    }
},
actions: {

},
});

(稍微添加了點(diǎn)東西)；

那么我們?cè)陧?yè)面上怎么用他呢？
只需要引入 store.ts 然后 store.state 就可以獲取state了
以HelloWorld.vue 為例

<template>
  <div class="hello">
    <template>
      <el-radio v-model="checkTest" @change="clickHandle" label="1">備選項(xiàng)</el-radio>
      <el-radio v-model="checkTest" @change="clickHandle" label="2">備選項(xiàng)</el-radio>
    </template>
  </div>
</template>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";
import store from "./../store";
import Combilestore from "../combineStore";

@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
  data() {//data 直接定義
    //數(shù)據(jù)
    return {
      checkTest: "1"
    };
  }
  //以前包裹在methods里面，現(xiàn)在可以獨(dú)立出來(lái)
  clickHandle(val) {
    //調(diào)用vuex的commit 方法提交mutations 更新state
    //輸出獲取state store.state 這個(gè)應(yīng)該和react 幾乎一模一樣
    console.log(store.state.checkTest);
    store.commit("setCheckedVal", { val: "1" });
  }
  //生命周期
  mounted() {
    console.log(store.state.checkTest);
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
h4 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

getters 是對(duì)state的一些過(guò)濾操作，如果想要改變state 就執(zhí)行store.commit 方法

第一個(gè)參數(shù)是mutations名稱(chēng) 在store的 mutations 下定義。

第二個(gè)參數(shù)是傳遞的參數(shù) 類(lèi)似react-redux 的 actions。

現(xiàn)在都是在一個(gè)store文件上定義所有state ，當(dāng)項(xiàng)目越來(lái)越大的時(shí)候如果還采用這種方式，那么store必定越來(lái)越大，有沒(méi)有什么辦法優(yōu)化呢？當(dāng)然有那就是Modules
官網(wǎng)例子

新建一個(gè)store 取名 combineStore.ts：

 import Vue from 'vue';
import Vuex from 'vuex';
const moduleA = {
    state: { name: "moduleA" },
    mutations: {},
    actions: {},
    getters: {}
}

const moduleB = {
    state: { name: "moduleB" },
    mutations: {},
    actions: {}
}

const Combilestore = new Vuex.Store({
    modules: {
        a: moduleA,
        b: moduleB
    }
})

// store.state.a // -> `moduleA`'s state
// store.state.b // -> `moduleB`'s state

export default Combilestore;

在組件中引入就可以用了：

import Combilestore from "../combineStore";

用法和普通store 并無(wú)區(qū)別

還可以整合elementUi

main.ts

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';
//引入elementui
import ElementUI from 'element-ui';
//引入樣式
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI)

Vue.config.productionTip = false;

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

感謝各位的閱讀！關(guān)于“怎么用vuex”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！