Shulou(Shulou.com)06/03 Report--

This article is about how to use vuex. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

First, paste the official document.

Https://vuex.vuejs.org/guide/modules.html

New project not to say much, with vue-cli, in the new project options to choose the typescript and class class way, this form and react class way is very similar, and then has been the next step, the project will automatically create a success for you, very hanging there.

Follow the prompts to run npm run serve's familiar interface:

There is no need to say this. Let's get to the point. In fact, we have automatically integrated vuex and created store.tsimport 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: 'Xiao Liu', age: 18}, {name: 'Xiao Wang', age: 11}, {name: 'Xiao Zhang', age: 18}, {name: 'Xiao Peng', age: 18} {name: 'Xiaoqiang', age: 19}, {name: 'boy', 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: {},}); (slightly added) So how do we use him on the page? You only need to introduce store.ts and then store.state can get state. Take HelloWorld.vue as an example, the alternative option import {Component, Prop, Vue} from "vue-property-decorator"; import store from ". /.. / store"; import Combilestore from ".. / combineStore"; @ Componentexport default class HelloWorld extends Vue {@ Prop () private MSG: string Data () {/ / data directly defines / / data return {checkTest: "1"};} / used to be wrapped in methods, but now clickHandle (val) {/ / call vuex's commit method to submit mutations update state / / output to get state store.state this should be almost exactly the same as react console.log (store.state.checkTest) Store.commit ("setCheckedVal", {val: "1"});} / / Lifecycle mounted () {console.log (store.state.checkTest);}} h4 {margin: 40px 0 0;} ul {list-style-type: none; padding: 0;} li {display: inline-block; margin: 0 10px;} a {color: # 42b983;}

Getters is some filtering operation for state. If you want to change the state, execute the store.commit method.

The first parameter is the mutations name defined under the mutations of store.

The second parameter is the passed parameter actions that is similar to react-redux.

Now all the state is defined on a store file, and if you still use this way when the project is getting bigger, then the store must be getting bigger and bigger, is there any way to optimize it? Of course there is. That's Modules.

Example of the official website

Create a new store and name it 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 stateexport default Combilestore You can use it by introducing it into the component:

Import Combilestore from ".. / combineStore"

There is no difference between usage and ordinary store.

ElementUi can also be integrated.

Main.ts

Import Vue from 'vue';import App from'. / App.vue';import router from'. / router';import store from'. / store';import'. / registerServiceWorker';// introduces elementuiimport ElementUI from 'element-ui';// introduction style 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') Thank you for reading! This is the end of the article on "how to use vuex". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.