怎么用vuex-创新互联

这篇文章给大家分享的是有关怎么用vuex的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。

目前成都创新互联已为1000+的企业提供了网站建设、域名、网站空间、网站托管运营、企业网站设计、尉犁网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

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

 新建项目就不多说了，用vue-cli ，在新建项目的选项上选择了typescript 和class 类的方式，这种形式也和react 的class 方式是很像的，然后一直下一步下一步，项目就给你自动创建成功了，很吊有没有。

怎么用vuex

根据提示运行 npm run serve 熟悉的界面就来了：

怎么用vuex

这些没必要说了，下面进入正题，其实已经自动整合了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 为例

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); } } h4 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; }

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”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

当前名称：怎么用vuex-创新互联
文章源于：http://pwwzsj.com/article/csogod.html

平武建站

怎么用vuex-创新互联

其他资讯