怎么用vuex

這篇文章給大家分享的是有關怎么用vuex的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

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

 新建項目就不多說了，用vue-cli ，在新建項目的選項上選擇了typescript 和class 類的方式，這種形式也和react 的class 方式是很像的，然后一直下一步下一步，項目就給你自動創建成功了，很吊有沒有。

根據提示 運行 npm run serve 熟悉的界面就來了：

這些沒必要說了，下面進入正題，其實已經自動整合了vuex 
并且創建了 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: '小強', 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: {

},
});

(稍微添加了點東西)；

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

<template>
  <div class="hello">
    <template>
      <el-radio v-model="checkTest" @change="clickHandle" label="1">備選項</el-radio>
      <el-radio v-model="checkTest" @change="clickHandle" label="2">備選項</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 直接定義
    //數據
    return {
      checkTest: "1"
    };
  }
  //以前包裹在methods里面，現在可以獨立出來
  clickHandle(val) {
    //調用vuex的commit 方法提交mutations 更新state
    //輸出獲取state store.state 這個應該和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 是對state的一些過濾操作，如果想要改變state 就執行store.commit 方法

第一個參數是mutations名稱 在store的 mutations 下定義。

第二個參數是傳遞的參數 類似react-redux 的 actions。

現在都是在一個store文件上定義所有state ，當項目越來越大的時候如果還采用這種方式，那么store必定越來越大，有沒有什么辦法優化呢？當然有那就是Modules
官網例子

新建一個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 并無區別

還可以整合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');

感謝各位的閱讀！關于“怎么用vuex”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！